Hello there, Dev. This quick tutorial will show you how to install Bootstrap in Laravel 9. You will learn how to implement bootstrap into Laravel. You can find out how to install Bootstrap 5 in Laravel 9 here. You can grasp an idea of how to install a Bootstrap 4 in Laravel. Let us begin with laravel install a bootstrap 5.
Bootstrap can be installed with Laravel 6, Laravel 7, Laravel 8, and Laravel 9.
In this tutorial, I will show you how to install a bootstrap correctly in your Laravel application. For adding bootstrap npm to a laravel application, we will use the laravel ui package. Laravel ui is a composer package made available by laravel.
So, let’s take the following steps:
How to Install Bootstrap in Laravel 9?
- Step 1: Install Laravel Project
- Step 2: Install Laravel UI
- Step 3: Generate Scaffolding
- Step 4: Installing a Bootstrap Packages
- Step 5: Use Bootstrap in Theme
Install Laravel Project
First and foremost, we must obtain a new Laravel 9 version application by using the command listed below. So, launch your terminal OR command prompt and type the following command:
composer create-project laravel/laravel example-app
Install Laravel UI
Let’s run the following command to install the Laravel UI Package:
composer require laravel/ui
Generate Scaffolding
Then, Install the laravel UI package command to create auth scaffolding.
The following command will only add bootstrap in your app.
php artisan ui bootstrap
The following command will add bootstrap along with Auth Scaffolding.
php artisan ui bootstrap --auth
Installing Bootstrap Packages
We must first install npm and then download the bootstrap packages.
Let’s run the following command to install npm:
npm install
On the resources/sass folder, you can see the Compile asset on _variables.scss and app.scss files.
resources/sass/app.scss
/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Nunito');
/* Variables */
@import 'variables';
/* Bootstrap */
@import '~bootstrap/scss/bootstrap';
Next, we must execute the following command for asset compilation:
/* for development */
npm run dev
/* for production */
npm run production
It creates CSS and JS min files.
Also Read : How to Install Alpine.js in Laravel 9
Use Bootstrap in Theme
You can use the following code to compile CSS and JS files on the theme blade file:
<!doctype html>
<html>
<head>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<h1>This is example from LaravelTuts.com</h1>
</body>
</html>
Run Laravel App:
After you have completed all of the necessary steps, type the following command and press enter to run the Laravel app:
php artisan serve
Now, Enter the following URL into your web browser and view the app output:
http://localhost:8000/
Also Read : How to install Selectize.JS in Laravel 9
Now you can see the layout as follows:
Home Page:

Login Page:

Register Page:

Dashboard Page:

Conclusion
In this practical, we covered an important concept related to Bootstrap and learned how to Install a Bootstrap in Laravel 9.
Also Read : Autocomplete Search using jQuery UI in Laravel 9
[…] Read also : How to Install Bootstrap in Laravel 9? […]
[…] Read also : How to Install Bootstrap in Laravel 9? […]
[…] Also Read : How to Install Bootstrap in Laravel 9? […]
[…] Also Read : How to Install Bootstrap in Laravel 9? […]
[…] Also Read : How to Install Bootstrap in Laravel 9? […]
[…] Source: laraveltuts.com […]