How to Install Bootstrap in Laravel 9?

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:

Homepage - How to Install Bootstrap in Laravel 9?

Login Page:

Login Page

Register Page:

Register Page

Dashboard Page:

Dashboard

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

6 Comments

Leave a Reply