How to Install and Use Bootstrap 5 and Bootstrap Icons in Laravel 12 Using Vite

Introduction

Laravel now uses Vite as its modern asset bundler, replacing Mix. If you're working with Bootstrap 5 and want to add Bootstrap Icons as well, this guide will show you the cleanest way to install and configure them properly in a Laravel project using npm.

Why Use Bootstrap 5 with Laravel?

Bootstrap 5 offers a responsive design system and pre-built UI components that make frontend development faster. Integrating it directly into Laravel using npm and Vite gives you better control over asset compilation and versioning.

Steps

01: Install Bootstrap and Bootstrap Icons via npm

Run the following command in your Laravel project root to install both packages:

npm i bootstrap bootstrap-icons --save-dev

02: Import CSS in app.css

Open resources/css/app.css and import Bootstrap and Bootstrap Icons:

@import "bootstrap/dist/css/bootstrap.min.css";
@import "bootstrap-icons/font/bootstrap-icons.css";
    

03: Import JS in app.js (optional)

If you want Bootstrap JS features (like modals, tooltips, dropdowns), import Bootstrap JS in resources/js/app.js:

import 'bootstrap';

04: Compile with Vite

Run the following command to compile assets:

npm run dev

Or for production build:

npm run build

05: Include @vite in Blade

In your Blade layout (like resources/views/layouts/app.blade.php), make sure to include Vite:

@vite(['resources/css/app.css', 'resources/js/app.js'])

06: Use Bootstrap Components and Icons

Now you can use Bootstrap classes and icons in your Blade views:

<button class="btn btn-primary">
  <i class="bi bi-lightning-fill"></i> Boost
</button>
    

Conclusion:

By following these steps, you've successfully integrated Bootstrap 5 and Bootstrap Icons in a Laravel project using Vite and npm. This setup is modern, modular, and scalable for real-world applications.