Skip to content

All topics  /  Laravel

How to Install Bootstrap 5 in Laravel 10?

Laravel ·

When “How to Install Bootstrap 5 in Laravel 10?” moves through design, development and browser testing, part time employee can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with Bootstrap before adopting it in production.

How to Install Bootstrap 5 in Laravel 10?

Hi dev,

I'll demonstrate how to install Bootstrap 5 in Laravel 10 today. We'll talk over installing Bootstrap with Laravel 10. You may learn how to install bootstrap 5 in Laravel 10 with the aid of this example. Laravel 10 vite Bootstrap 5 will be taught to you.

If you want to set up laravel 10 with bootstrap 5 and vite. Next, I'll assist you in understanding how to install Bootstrap 5 with npm vite step by step. In order to add bootstrap to a Laravel 10 application, let's follow the steps below.

Let's see the following steps:

Step 1: Install Laravel 10 App


This step is not required; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Install Laravel UI Package

Here, we will install laravel ui package that allow to install bootstrap with auth. so, let's run following command:

composer require laravel/ui --dev

Step 3: Install Bootstrap Auth Scaffolding

Here, we will add bootstrap with auth scaffolding. so, let's run following command:

php artisan ui bootstrap --auth

Step 4: Install Bootstrap Icon

In this step, we will add bootstrap icon. so, let's run following command:

npm install bootstrap-icons --save-dev

now, import icon css on resources\sass\app.scss file as like the below code:

resources\sass\app.scss 

/* Fonts */
@import url('https://fonts.bunny.net/css?family=Nunito');
/* Variables */
@import 'variables';
/* Bootstrap */
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons.css';

Step 5: Build CSS & JS File

In this step, we will build css and js file. so, let's run following two commands:

npm install

   
npm run build

Step 6: Use Bootstrap Class

Here, we will update welcome.blade.php file and use bootstrap class.

resources\view\welcome.blade.php 

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

  
    <title>{{ config('app.name', 'Laravel') }}</title>

  
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">

  
    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

  
    <style type="text/css">
        i{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="app">

  
        <main class="container">
            <h1> How to Install Bootstrap 5 in Laravel 10</h1>
            <div class="card">
              <div class="card-header">
                Icons
              </div>
              <div class="card-body text-center">
                    <i class="bi bi-bag-heart-fill"></i>
                    <i class="bi bi-app"></i>
                    <i class="bi bi-arrow-right-square-fill"></i>
                    <i class="bi bi-bag-check-fill"></i>
                    <i class="bi bi-calendar-plus-fill"></i>
              </div>
            </div>
        </main>
    </div>
</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/

More on this topic