How to Add Bootstrap 5 to Laravel 11

How to Add Bootstrap 5 to Laravel 11

Laravel 11 streamlines backend development, while Bootstrap offers frontend design components and styles. Together, they enable the creation of robust and visually appealing web applications.

In this tutorial, I'll guide you through the process of installing Bootstrap 5 in Laravel 11. Let's start by installing a fresh copy of the Laravel 11 framework.

Step 01: Install a Fresh Laravel 11 Application

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

composer create-project laravel/laravel laravel-with-bootstrap

Alternatively, if you have the Laravel 11 installer, you can use this command:

laravel new laravel-with-bootstrap

Note: I use Laragon for managing Laravel and other PHP-based web applications. It's akin to WAMP/Xampp local web environments, providing an all-in-one solution to quickly get started.

Once Laravel is installed, navigate to the project directory in the terminal:

cd laravel-with-bootstrap

Step 02: Install Laravel UI Package

In this step, install the Laravel UI package by running the following command:

composer require laravel/ui --dev

Step 03: Bootstrap Auth Installation

Next, install the Bootstrap CSS framework along with authentication scaffolding by running the following command:

php artisan ui bootstrap --auth

This command makes several changes in the Laravel application for authentication:

  • Generates routes in the routes/web.php file.
  • Creates controllers for user registration, login, and password reset.
  • Generates Blade views for authentication pages.
  • Creates a migration for the users table.

Step 04: Install Bootstrap Icon

After installing Bootstrap, install the Bootstrap icon package by running:

npm install bootstrap-icons --save-dev

Once installed, import the icons in the app.scss file located in the resources/sass/ directory:

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

Then, build the CSS and JS files using:

npm install
npm run dev

Final Step

In the welcome.blade.php file in the views directory, replace the existing code with the following:

<!DOCTYPE html>
<html lang="">
    <head>
        <!-- Meta tags, title, etc. -->

        <!-- Fonts -->
        <!-- CSS imports -->

        <!-- Custom Styles -->
        <style type="text/css">
            .bt-icons i {
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <main class="container">
            <div class="flex justify-center">
                <h1>Install Bootstrap in Laravel with CoderAdvise.com</h1>
            </div>
            <div class="bt-icons">
                <i class="bi bi-airplane-fill"></i>
                <i class="bi bi-apple"></i>
                <i class="bi bi-balloon-heart"></i>
            </div>
        </main>
    </body>
</html>

To view the result, run the Laravel application on the development server:

php artisan serve

Visit the following URL in your browser to see the result:

http://127.0.0.1:8000/

  • Date: