How to Install Bootstrap 5 with Laravel 10 & 11

Bootstrap is a widely-used front-end framework that offers a collection of CSS and JavaScript components to create responsive and mobile-first web applications. Integrating Bootstrap with Laravel, a robust PHP web framework, simplifies the development process and enhances user experience. This guide will walk you through the steps to install and configure Bootstrap 5 with Laravel 9/10/11.

Prerequisites

Ensure you have the following prerequisites installed on your system:

• 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, install the Sass compiler by running:

npm install -D sass

Step 3: Install Dependencies

After installing Bootstrap and Sass, install the project’s remaining dependencies:

npm install

Step 4: Configure Vite

Laravel 9/10/11 uses Vite as the default bundler for compiling assets. Configure Vite to include your 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', // Update with your Sass file name
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

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

Step 5: Import Bootstrap

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

import 'bootstrap';
import './bootstrap'; // Laravel axios

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

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, compile your assets by running:

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.