3 way to install bootstrap 5 in laravel 8

in this tutorial you will learn 3 way to install bootstrap 5 in laravel 8 or implements .Bootstrap 5 version 5 release.

Bootstrap is use for create front-end and backend admin panel .it is easy and simple ,Quickly to learn , Bootstrap 5 features is design ,customize ,responsive mobile-first ,Sass variables and mixins, responsive grid system, extensive pre built components, and powerful JavaScript plugins.


3 way to install bootstrap 5 in laravel 8


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


Step 1: Create Laravel Project

Installing a fresh laravel project, so head over to the terminal, type the command, and create a new laravel app.


composer create-project laravel/laravel boostrap-5

Step 2: Adding Bootstrap 5 CDN

using cdn it is very easy and simple for beginners. it does not take much time you need to add simply Boostrap 5 CDN

in before </head> tage add bootstrap.min.css cdn and before </body> 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

second method is we can download Bootstrap 5 file and compress it, then we need to put file in public folder

After we can connect our style {{ asset('css/bootstrap.min.css') }} or js {{ 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>


How to install Inertia js in Laravel 8 with Vue 3


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 [email protected]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


let see

<!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>


Related Posts

👉 Laravel Livewire Shopping Cart Step by Step Example

👉 Laravel 8 Add to Cart Step by Step Example

👉 Laravel 8 image Upload full crud with spatie mediaLibrary package

👉 how to clear all cache in laravel using one command


Tailwind CSS Components


Tailwind CSS Badge 

Tailwind CSS Search

Tailwind CSS Pagination

Tailwind CSS Table 

Tailwind CSS Button

Tailwind CSS Modals

Tailwind CSS Avatar

Tailwind CSS loading Spinner

Tailwind CSS Progress Bar 

Tailwind CSS Alert Components 

Responsive Card Grid With Tailwind CSS

Tailwind CSS Dropdowns

Tailwind CSS Card

Tailwind CSS List Group

Tailwind CSS Breadcrumbs

Tailwind CSS Accordion (FAQ)

Tailwind CSS Responsive Image Gallery with Grid

Tailwind CSS Tabs