Bootstrap is a free and open-source CSS framework for responsive and mobile-first front-end web development. It contains HTML, CSS, and JavaScript-based design layouts for typography, forms, buttons, route, and other interface components. This popular framework has a responsive grid system for layout, pre-built components for design patterns, and JS plugins for user interaction.
In this article, I’ll introduce you to Bootstrap, and how to install it within your Laravel 9 application.
What is Bootstrap?
Bootstrap speeds up web development and makes it easier. It’s responsive by design and compatible with a variety of browsers. It offers reliable design through reusable components, and it is exceptionally simple to use and to learn.
Bootstrap utilizes JavaScript, a built-in back for jQuery plugins, and a programmatic JavaScript API. It can be utilized with any IDE or free PHP editors, and any server-side language and technology, from ASP.NET and Ruby on Rails to PHP. The Bootstrap UI is a consistent library of designs for beautiful and intuitive web apps.
With Bootstrap, web designers can concentrate on improvements without stressing about design, to get an interactive website up and running quickly. It also offers web architects a strong establishment for making interesting Bootstrap themes.
How to Install Bootstrap 5 in Laravel 9?
Follow this step-by-step guide to use laravel bootstrap.
1) Install Laravel Project
Execute the following command to install a new Laravel project from scratch.
composer create-project laravel/laravel –prefer-dist laravel-bootstrap
To use the newly created Laravel app:
cd laravel-bootstrap
2) Install Laravel/UI
The Laravel UI is an official library of particular or predefined UI components. It offers a login and enrollment platform for Respond, Vue, jQuery, and Bootstrap formats.
Run this command to install Laravel/UI:
composer require laravel/UI
3) Install Bootstrap in Laravel
Run this command to install the Bootstrap CSS framework in your Laravel project:
php artisan up Bootstrap
4) Install Bootstrap Auth Scaffolding
Execute the following command to install the auth scaffoldings:
php artisan up Bootstrap –auth
This concludes Bootstrap’s installation process. To make sure it’s installed properly, go to resource/js/bootstrap.js. You will see that popper.js and jQuery have been added to Bootstrap’s JavaScript file.
5) Install Bootstrap Packages
Now let’s install the Bootstrap packages for the associated frontend component.
Before moving forward, make sure you have Node installed on your local development system with the following command:
# for node
node -v
# for npm
npm -v
Finally, install the Bootstrap package and related frontend dependencies like jquery from npm with the following command:
npm install
6) Compile Assets
The resources/sass folder _variables.scss and app.scss files will be 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 run the command below for asset compilation.
# for development
npm run dev
Run the command below to compile CSS and JavaScript files from resources/js and resources/sass folder to the public folder.
# for production
npm run production
7) Automate SASS and JS Changes
If you don’t want to run the npm run dev command every time you make changes in SASS and JS file, use the following command.
npm run watch
This will keep an eye on your files and compile code automatically if it detects any change in SASS and JS files.
8) Using Bootstrap in Laravel Blade Template
The sass files are now compiled to a single CSS file inside the public folder. 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>