September 23, 2024
Category : Laravel
How to Install Bootstrap in Laravel?
Hello Dev,
In this short tutorial, we will cover how to install bootstrap in laravel. you'll learn how to add bootstrap in laravel. you can see how to install bootstrap 5 in laravel 9. you can understand a concept of how to install bootstrap 4 in laravel. Let's get started with laravel install bootstrap 5.
You can install bootstrap with laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 version.
In this tutorial, i will give you steps to properly install bootstrap in your laravel application. we will use laravel ui package for adding bootstrap npm in laravel application. laravel ui is a composer package provided by laravel.
So, let's follow bellow steps:
Step 1: Install Laravel
First of all, we need to get a fresh Laravel 9 version application using bellow command, So open your terminal OR command prompt and run bellow command:
composer create-project laravel/laravel example-app
Step 2: Install Laravel UI
Let's run bellow command to install laravel ui package by bellow command:
composer require laravel/ui
Read Also: PHP Laravel Inner Join Query Example
Step 3: Generate Scaffolding
Next, you have to install the laravel UI package command for creating auth scaffolding using bootstrap 5.
Below command will install only bootstrap in your app.
php artisan ui bootstrap
Below command will install bootstrap with Auth Scaffolding
php artisan ui bootstrap --auth
Step 4: Install Bootstrap Packages
Here, we need to install npm and download bootstrap packages.
let's run bellow command for install npm:
npm install
You can see Compile asset on _variables.scss and app.scss files on resources/sass folder.
resources/sass/app.scss
/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Nunito');
/* Variables */
@import 'variables';
/* Bootstrap */
@import '~bootstrap/scss/bootstrap';
Next, Now, we have to run the below command for asset compilation:
/* for development */
npm run dev
/* for production */
npm run production
It will generate CSS and js min files.
Step 5: Use Bootstrap in Theme
You can use compile css and js file on theme blade file as like bellow:
<!doctype html>
<html>
<head>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<h1>This is example from ItSolutionStuff.com</h1>
</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/
now you can see layout bellow as here:
Home Page:
Login Page:
Register Page:
Dashboard Page:
Output:
I hope it can help you...
;void(0);){kind=link}
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
Subscribe me on: Youtube
We are Recommending you
- Laravel 9 ChartJS Chart Example Tutorial
- Laravel 9 Autocomplete Search using Typeahead JS Example
- How to Install Laravel in Ubuntu Server?
- How to Install Phpmyadmin in Ubuntu Server?
- Laravel Firebase Push Notification to Android and IOS App Example
- How to Install and Use Memcached in Laravel?
- Laravel Add Custom Configuration File Example
- Laravel Telescope Installation and Configuration Tutorial
- Laravel Fullcalendar Example Tutorial
- Laravel Carbon Check Current Date Between Two Dates Example
- PHP Laravel Inner Join Query Example
;void(0);){kind=link}