How to Install Bootstrap 5 in Laravel 9

May 16, 2022 5 Min Read

This tutorial will show us how we can install Bootstrap 5 in Laravel 9 and use it without any further hassle. It does not matter if you are new or a veteran Laravel developer, you can easily follow these steps and install Bootstrap 5 in Laravel 9 using this method. This will instantly install Laravel 9 UI using composer package on your machine.

Through this tutorial you can understand a few basics about Laravel and Bootstrap such as:

  • Installation of Laravel UI Methods 
  • Understanding Bootstrap Installation Dependencies and Packages 
  • Compiling Bootstrap Assets
  • Bootstrap Auth Scaffolding Installation
  • Methods to compile Bootstrap CSS and JS in Laravel Blade Template

We all know this bit that Bootstrap is a framework used for CSS and its UI which is minimalistic can be used to develop amazing apps for mobiles and surface internet. So without much ado lets dive into installing Bootstrap 5 in Laravel 9.

Install Laravel Project

We are going to install a Bootstrap Demo in Laravel and executing following command is required to install the project from the beginning.

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

Once done then type the following command to get inside the the newly created Laravel app. 

cd laravel-bootstrap

Now let’s move further to install the UI that’s mentioned below

Install Laravel/UI

First of all if you are new you should know that laravel/ui is the official library that is used to fetch UI components already defined. It comes with login and registration scaffolding for not just Bootstrap but React, jQuery and Vue as well.

To install it run the following command

composer require laravel/ui

Install Bootstrap in Laravel

Since we already have installed Laravel/UI package with the help of Composer, the next is installing Bootstrap 5 by using this command:

php artisan ui bootstrap

Install Bootstrap Auth Scaffolding

The next step is installing Bootstrap Authentication or Auth Scaffolding. To do this type the following command:

php artisan ui bootstrap --auth

This has installed Bootstrap on your system. In order to confirm it’s there, go to resources/js/bootstrap.js and see. You will notice two new additions in the folder Popper.js and jQuery in Bootstrap JS File folder. After confirming move further and see install the packages next.

Install Bootstrap Packages

For the frontend components we need to install Bootstrap packages as everything seems sorted now. But before that we need to understand that installing Node is necessary. To check if Node is already installed or not run the following command in the terminal.

# for node
node -v
# for npm
npm -v

Having done with Node time to install Bootstrap Package and other dependencies including jQuery from NPM by executing following command.

npm install

Compile Assets

There’s something noticeable you will see that resources/sass folder _variables.scss and app.scss files are included with SASS variables and fonts.

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

Next run the following command to compile the assets

# for development
npm run dev

# for production
npm run production

By executing the command mentioned above has compiled CSS and JS files from resources/js and resources/sass to the Public folder.

Automate SASS and JS Changes

There is a way to automate SASS and JS changes if you don’t want to run NPM dev command every time. Just tweak a couple of thins in SASS and JS File. Execute the following command:

npm run watch

This will always keep files checked and compile the code automatically if the changes detected in SASS and JS files.

Using Bootstrap in Laravel Blade Template

As we have compiled the CSS files  in the single public folder, so we are able to define the JS and CSS path and start using the Bootstrap JS and CSS in the Laravel Blade Template:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <h1>How to Install Bootstrap 5 in Laravel 9</h1>
</body>
</html>

 

Learn Laravel, React, VueJS and Python
read programming books
Tags: