How to Properly Install and Use Bootstrap 4 in Laravel 7

Last updated on by Digamber
In this tutorial, i am going to show you how to install and use Bootstrap 4 in the Laravel 7 project instantly. If you are new to Laravel and looking to learn how to install Bootstrap 4 in Laravel 7 then you are at the right place we will help you install laravel ui through composer package in less than 5 minutes.

We will cover the following concepts of Laravel and Bootstrap:

  • How to Install Laravel/UI.
  • How to install Bootstrap and its packages
  • How to compile Bootstrap assets.
  • How to install Bootstrap Auth Scaffolding.
  • How to use complied Bootstrap CSS and JS in Laravel 7 blade template.

Bootstrap is a CSS framework, and it provides user-friendly UI components that help to build a next-level web or mobile application. This is a step by step guide on how to use Bootstrap 4 in Laravel 7.

Install Laravel Project

To give you the demo of Bootstrap installation in Laravel 7, we need to execute the following command to install a new Laravel project from scratch.

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

Get inside the newly created Laravel app.

cd laravel-bootstrap

Install Laravel/UI

Laravel UI is an official library that offers selective or predefined UI components. The laravel/ui package comes with the login and registration scaffolding for React, Vue, jQuery, and Bootstrap layouts.

Run the command to install Laravel/UI.

composer require laravel/ui

Install Bootstrap in Laravel 7

We have successfully installed a laravel/ui package using Composer, now in this step, we will understand how to easily install the Bootstrap 4 CSS Framework using the following command.

Run command to install Bootstrap in Laravel project.

php artisan ui bootstrap

Install Bootstrap Auth Scaffolding

Execute the following command to Install the auth scaffoldings with Bootstrap.

php artisan ui bootstrap --auth

We have successfully installed the bootstrap, and you can make sure by going to resource/js/bootstrap.js. You will see that popper.js and jQuery have been added to the bootstrap’s JavaScript file.

Install Bootstrap Packages

We have placed everything at its place, and now we have to install the bootstrap packages for the associated frontend component.

Before we move forward, first, make sure you have Node installed on your local development system. Run the following command to check node installation.

# for node
node -v

# for npm
npm -v

Finally, you need to install the bootstrap package and the related frontend dependencies such as jquery from npm using the following command:

npm install

Compile Assets

As we can see, resources/sass folder _variables.scss and app.scss files have added along with sass variables and fonts.

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

Now, we have to run the below command for asset compilation.

# for development
npm run dev


# for production
npm run production

The above command compiles CSS and JavaScript files from resources/js and resources/sass folder to the public folder.

Automate SASS and JS Changes

If you are lazy and don’t want to run the npm run dev command every time you make changes in SASS and JS file, you should use the following command.

npm run watch

It keeps an eye on your files and compiles the code automatically if detects any change made in SASS and JS files.

Using Bootstrap in Laravel Blade Template

Now, sass files are complied to single CSS file inside the public folder, and we can define the js and CSS path and use 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>Tutorial made by Positronx.io</h1>
</body>
</html>