3 way to install bootstrap 5 in laravel 8

In this tutorial, you will learn three ways to install Bootstrap 5 in Laravel 8 or implement it. Bootstrap 5, the latest release of Bootstrap, is commonly used for creating frontend and backend admin panels. It offers ease of use, simplicity, and quick learning curve. Some key features of Bootstrap 5 include:

Design customization
Responsive, mobile-first design

Sass variables and mixins
Responsive grid system
Extensive pre-built components

Powerful JavaScript plugins

Step 1: Create Laravel Project

Run below command to create laravel project.

composer create-project laravel/laravel laravel-boostrap

Step 2: Adding Bootstrap 5 CDN

Using a CDN is very easy and simple, especially for beginners. It doesn’t take much time. You just need to add the Bootstrap 5 CDN.

Before the closing </head> tag, add the bootstrap.min.css CDN, and before the closing </body> tag, add bootstrap.bundle.min.js.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Boostrap 5</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="alert alert-success mt-5" role="alert">
            Boostrap 5 is working!
        </div>    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

Step 3: Adding Bootstrap Public Folder

The second method involves downloading the Bootstrap 5 files and compressing them. Then, we need to place the files in the public folder.

After that, we can link our styles using {{ asset('css/bootstrap.min.css') }} and JavaScript using {{ asset('js/bootstrap.min.js') }}.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Boostrap 5</title>
    <link rel="stylesheet" href={{ asset('css/bootstrap.min.css') }}>
</head>
<body>
    <div class="container">
        <div class="alert alert-success mt-5" role="alert">
            Boostrap 5 is working!
        </div>    
    </div>
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
</body>
</html>

Step 4: Adding Bootstrap 5 using Laravel Mix

In Laravel Mixing Bootstrap 5 Install is difficult than 1 and 2 method. you need to install first node npm if you do not have node npm package then install first other wise Laravel mix not working,

npm install

Next, you can see node_modules Folder it mean npm is working. Now we need to install bootstrap 5.

npm install bootstrap@next --save-dev

Next, we need run one more command npm install @popperjs/core –save-dev.

npm install @popperjs/core --save-dev

After, you can see in package.json.

"devDependencies": {
        "@popperjs/core": "^2.9.2",
        "axios": "^0.21",
        "bootstrap": "^5.0.0-beta3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14"
    }

Next, you need to create folder scss inside app.scss file.resources/scss/app.scss put @import “~bootstrap/scss/bootstrap”;

 @import "~bootstrap/scss/bootstrap";

Next, For Js you need to add only resources/js/bootstrap.js put import “bootstrap”;

window._ = require("lodash");
import "bootstrap";

Then,run last command.

npx mix

Then installed successfully Bootstrap 5 in laravel 8 .you can see we got new file app.css and app.js.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Boostrap 5</title>
    <link rel="stylesheet" href={{ asset('css/app.css') }}>
</head>
<body>
    <div class="container">
        <div class="alert alert-success mt-5" role="alert">
            Boostrap 5 is working using laravel 8 mix!
        </div>    
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Another Way to install bootstrap 5 in laravel

laravel ui now come with bootstrap 5, you can install with laravel ui with bootstrap 5.

Install bootstrap 5 via Laravel UI.

composer require laravel/ui

Once the laravel/ui package has been installed, you may install the frontend scaffolding using the ui Artisan command:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

Step 1: Create Laravel Project

Step 2: Adding Bootstrap 5 CDN

Step 3: Adding Bootstrap Public Folder

Step 4: Adding Bootstrap 5 using Laravel Mix

Another Way to install bootstrap 5 in laravel

saim ansari