how to install and use bootstrap 5 in laravel 9

We will cover the following concepts of Laravel and Bootstrap:

How to Install Laravel/UI.
How to install Bootstrap and its packages
How to compile Bootstrap assets.
How to install Bootstrap Auth Scaffolding.
How to use complied Bootstrap CSS and JS in Laravel blade template.

Bootstrap is a CSS framework, and it provides user-friendly UI components that help to build a next-level web or mobile application.

Install Laravel Project

To give you the demo of Bootstrap installation in Laravel, we need to execute the following command to install a new Laravel project from scratch.

composer create-project laravel/laravel --prefer-dist laravel-bootstrap
cd laravel-bootstrap

Install Laravel/UI

Laravel UI is an official library that offers selective or predefined UI components. The laravel/ui package comes with the login and registration scaffolding for React, Vue, jQuery, and Bootstrap layouts.

Run the command to install Laravel/UI.

composer require laravel/ui

Install Bootstrap in Laravel

We have successfully installed a laravel/ui package using Composer, now in this step, we will understand how to easily install the Bootstrap 4 CSS Framework using the following command.

Run command to install Bootstrap in Laravel project.

php artisan ui bootstrap

Install Bootstrap Auth Scaffolding

Execute the following command to Install the auth scaffoldings with Bootstrap.

php artisan ui bootstrap --auth

Install Bootstrap Packages

We have placed everything at its place, and now we have to install the bootstrap packages for the associated frontend component.

Before we move forward, first, make sure you have Node installed on your local development system. Run the following command to check node installation.

npm -v

Finally, you need to install the bootstrap package and the related frontend dependencies such as jquery from npm using the following command:

npm install

Compile Assets

As we can see, resources/sass folder _variables.scss and app.scss files have added along with sass variables and fonts.

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';

Now, we have to run the below command for asset compilation.

# for development
npm run dev

# for production
npm run production

or compile static:

npm run build

The above command compiles CSS and JavaScript files from resources/js and resources/sass folder to the public folder.

Using Bootstrap in Laravel Blade Template

Now, sass files are complied to single CSS file inside the public folder, and we can define the js and CSS path and use the Bootstrap js and CSS in the Laravel blade template.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <h1>Tutorial made by itblog.webdigg.org</h1>
</body>
</html>