3 way to install bootstrap 5 in laravel 8
Tags: laravel, css, javascript, webdev
Published: 2021-05-21 04:57:46

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

```bash
composer create-project laravel/laravel boostrap-5
```

Step 2: Adding Bootstrap 5 CDN

```html
<!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/bootstrap@5.0.1/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/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
```
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 tag add bootstrap.bundle.min.js

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

```html
<!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 
```php
"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";
```css
 @import "~bootstrap/scss/bootstrap";
```
Next, For Js you need to add only resources/js/bootstrap.js put import "bootstrap";

```javascript
window._ = require("lodash");
import "bootstrap";
```
Then,run last command 
```
npx mix
```
you can see 
```html
<!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>
```

[visit my website](https://larainfo.com/)
### Read also 

[Laravel php artisan inspire command](https://larainfo.com/blogs/laravel-php-artisan-inspire-command-that-can-inspire-you)
[Laravel clear cache without using artisan command](https://larainfo.com/blogs/laravel-clear-cache-without-artisan)