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 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.
Install Laravel Project
To give you the demo of Bootstrap installation in Laravel, we need to execute the following command to install a new Laravel project from scratch.
composer create-project laravel/laravel --prefer-dist laravel-bootstrapGet inside the newly created Laravel app.
cd laravel-bootstrapInstall 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/uiInstall Bootstrap in Laravel
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 bootstrapInstall Bootstrap Auth Scaffolding
Execute the following command to Install the auth scaffoldings with Bootstrap.
php artisan ui bootstrap --authWe 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 -vFinally, you need to install the bootstrap package and the related frontend dependencies such as jquery from npm using the following command:
npm installCompile 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 productionThe 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 watchIt 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>