How to Install Bootstrap in Laravel?

By Hardik Savani • September 23, 2024

Laravel

Hello Dev,

In this short tutorial, we will cover how to install bootstrap in laravel. you'll learn how to add bootstrap in laravel. you can see how to install bootstrap 5 in laravel 9. you can understand a concept of how to install bootstrap 4 in laravel. Let's get started with laravel install bootstrap 5.

You can install bootstrap with laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 version.

In this tutorial, i will give you steps to properly install bootstrap in your laravel application. we will use laravel ui package for adding bootstrap npm in laravel application. laravel ui is a composer package provided by laravel.

So, let's follow bellow steps:

Step 1: Install Laravel

First of all, we need to get a fresh Laravel 9 version application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project laravel/laravel example-app

Step 2: Install Laravel UI

Let's run bellow command to install laravel ui package by bellow command:

composer require laravel/ui

Step 3: Generate Scaffolding

Next, you have to install the laravel UI package command for creating auth scaffolding using bootstrap 5.

Below command will install only bootstrap in your app.

php artisan ui bootstrap

Below command will install bootstrap with Auth Scaffolding

php artisan ui bootstrap --auth

Step 4: Install Bootstrap Packages

Here, we need to install npm and download bootstrap packages.

let's run bellow command for install npm:

npm install

You can see Compile asset on _variables.scss and app.scss files on resources/sass folder.

resources/sass/app.scss


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

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

/* for development */

npm run dev

/* for production */

npm run production

It will generate CSS and js min files.

Step 5: Use Bootstrap in Theme

You can use compile css and js file on theme blade file as like bellow:


<!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 ItSolutionStuff.com</h1>
</body>
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/

now you can see layout bellow as here:

Home Page: