Skip to content Skip to sidebar Skip to footer

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.

Our expert web development services create responsive, fast, and visually stunning websites tailored to your needs. Get started today!