Install Bootstrap 5 in Laravel 10

Last updated on October 3, 2023

Are you looking to use Bootstrap 5 in the Laravel framework? Yes, it is a good choice.

Laravel simplifies backend development, while Bootstrap provides frontend design components and styles. Together, they can help you create powerful and visually appealing web applications.

In this article, I will help you in installing Bootstrap 5 in Laravel 10. Let’s begin with installing a fresh copy of the Laravel framework.

Step 01: Install the Fresh Laravel Application

Open the terminal and run the following command to install Laravel with the project name laravel-with-bootstrap:

composer create-project laravel/laravel laravel-with-boostrap

In case you installed the Laravel installer then you can also use the following command to install it.

laravel new laravel-with-bootstrap

Note: I use Laragon for managing Laravel and other PHP-based web applications. It is similar to WAMP/Xampp local web environment and it has an all-in-one solution to get started quickly. Here’s a guide for installing Laragon on Windows.

Once the Laravel is installed then change the directory in the terminal and enter into the Laravel project.

cd laravel-with-boostrap

Step 02: Install Laravel UI Package

In this step, run the below command that installs the UI package.

composer require laravel/ui --dev

The installation process typically takes only a few seconds.

Install Laravel UI Package

Step 03: Bootstrap Auth Installation

Next, let’s install the Bootstrap CSS framework along with auth scaffolding in the application. To do so, run the following command in the terminal:

php artisan ui bootstrap --auth

But what happens when you run this command? It makes several changes in the Laravel application for authentication:

  • It generates routes in the routes/web.php file.
  • It creates controllers for user registration, login, and reset password.
  • It generates Blade views for these authentication pages.
  • It creates a migration for the users table.
Bootstrap Auth Installation in Laravel 10

Step 04: Install Bootstrap Icon

After the bootstrap installation, I need to install the icon as well. To do that, run the below command in the terminal,

npm install bootstrap-icons --save-dev

Similar to Step 01, it takes only a few seconds to complete.

Once the bootstrap icon is installed, you need to import icons in the app.scss file. So go to resources/sass/ directory and open app.scss file. Copy the below line and paste at the end of the file,

@import 'bootstrap-icons/font/bootstrap-icons.css';

In other words, your app.scss file should look like below,

// Fonts
@import url('');

// Variables
@import 'variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons.css';

Next, build the CSS and JS files through the following commands,

npm install

Once it is complete, then run the below command,

npm run dev

In the last step, I removed all the code from welcome.blade.php file from views directory and added below,

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <!-- Fonts -->
        <link rel="preconnect" href="">
        <link href=",600&display=swap" rel="stylesheet" />

        <style type="text/css">
            .bt-icons i{
                font-size: 30px;

        <!-- Scripts -->
        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
        <main class="container">
                <div class="flex justify-center">
                    <h1>Install Bootstrap in Laravel with</h1>
                <div class="bt-icons">
                    <i class="bi bi-airplane-fill"></i>
                    <i class="bi bi-apple"></i>
                    <i class="bi bi-balloon-heart"></i>

To see the result, run the below command that will run the Laravel application on the development server,

php artisan serve

Go to the browser and run the below URL to see the result,

Bootstrap 5 installation in Laravel

Written by
I am a web developer with over 2 years of industry experience, specializing in PHP, JavaScript, MySQLi, and Laravel. I create dynamic and user-friendly web applications, committed to delivering high-quality digital solutions.

Share on:

Related Posts

Improved by: Ayaz Ali Shah

Tags: Laravel,