Bootstrap is a popular front-end framework that offers a collection of CSS and JavaScript components for building responsive and mobile-first web applications. Integrating Bootstrap with Laravel, a powerful PHP web framework, can simplify the development process and improve the user experience of your web applications. In this article, we’ll guide you through the steps to install and configure Bootstrap 5 with Laravel 9/10/11.

Prerequisites

Before we begin, make sure you have the following prerequisites installed on your system:

- A Laravel 9/10/11 project set up
- Node.js and npm (Node Package Manager) installed

Step 1: Install Bootstrap via npm

Open your terminal or command prompt, navigate to the root directory of your Laravel project, and run the following command to install Bootstrap 5:

npm install -D bootstrap@5.3.3

This command installs Bootstrap 5.3.3 as a development dependency for your project.

Step 2: Install Sass

Since we will use Sass for styling, we need to install the Sass compiler. Run the following command:

npm install -D sass

Step 3: Install Dependencies

After installing Bootstrap and Sass, you need to install the remaining dependencies for the project. Run the following command:

npm install

Step 4: Configure Vite

Laravel 9/10/11 uses Vite as the default bundler for compiling assets. We need to configure Vite to include our Sass and JavaScript files.

1. Create a new Sass file named app.scss or whatever.scss in the resources/sass directory.
2. Open the vite.config.js file in the root directory of your project and update it with the following code:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss', // Our new line you can change app.scss to whatever.scss
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

This configuration instructs Vite to include the app.scss and app.js files during the build process.

Step 5: Import Bootstrap

1. Open the resources/js/app.js file and import Bootstrap by adding the following line:

import 'bootstrap';

Paul Phillips

: Not sure if this is specific to Laravel 11 but `resources/js/app.js already had import ‘./bootstrap’; which was initially confusing until I spotted the difference and ended up with:

import ‘bootstrap’; // Bootstrap Framework

import ‘./bootstrap’; // Laravel axios

From versions 5.7 to 8.x, the syntax was require('./bootstrap');. Starting from version 9.x, the app.js file includes that line.

The file should now look like the example below.

import './bootstrap';
import 'bootstrap';

2. Open the resources/sass/app.scss file and import the Bootstrap Sass files by adding the following line at the top of the file:

@import 'bootstrap/scss/bootstrap';

Step 6: Include Styles and Scripts in Your Layout

In your main layout file (e.g., app.blade.php), add the following line just before the closing </head> tag to include the compiled CSS and JavaScript files:

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

Step 7: Compile Assets

Finally, run the following commands to compile your assets:

npm run dev

This command will compile your Sass and JavaScript files, including the Bootstrap assets.

Congratulations! You have successfully installed and configured Bootstrap 5 with Laravel 9/10/11. You can now start using Bootstrap components and utilities in your Laravel application.

Happy Coding!