How to Add Bootstrap 5 to Laravel 11
Laravel 11 streamlines backend development, while Bootstrap offers frontend design components and styles. Together, they enable the creation of robust and visually appealing web applications.
In this tutorial, I'll guide you through the process of installing Bootstrap 5 in Laravel 11. Let's start by installing a fresh copy of the Laravel 11 framework.
Step 01: Install a Fresh Laravel 11 Application
Open your terminal and execute the following command to install Laravel 11 with the project name laravel-with-bootstrap
:
composer create-project laravel/laravel laravel-with-bootstrap
Alternatively, if you have the Laravel 11 installer, you can use this command:
laravel new laravel-with-bootstrap
Note: I use Laragon for managing Laravel and other PHP-based web applications. It's akin to WAMP/Xampp local web environments, providing an all-in-one solution to quickly get started.
Once Laravel is installed, navigate to the project directory in the terminal:
cd laravel-with-bootstrap
Step 02: Install Laravel UI Package
In this step, install the Laravel UI package by running the following command:
composer require laravel/ui --dev
Step 03: Bootstrap Auth Installation
Next, install the Bootstrap CSS framework along with authentication scaffolding by running the following command:
php artisan ui bootstrap --auth
This command makes several changes in the Laravel application for authentication:
- Generates routes in the
routes/web.php
file. - Creates controllers for user registration, login, and password reset.
- Generates Blade views for authentication pages.
- Creates a migration for the users table.
Step 04: Install Bootstrap Icon
After installing Bootstrap, install the Bootstrap icon package by running:
npm install bootstrap-icons --save-dev
Once installed, import the icons in the app.scss
file located in the resources/sass/
directory:
@import 'bootstrap-icons/font/bootstrap-icons.css';
Then, build the CSS and JS files using:
npm install
npm run dev
Final Step
In the welcome.blade.php
file in the views
directory, replace the existing code with the following:
<!DOCTYPE html>
<html lang="">
<head>
<!-- Meta tags, title, etc. -->
<!-- Fonts -->
<!-- CSS imports -->
<!-- Custom Styles -->
<style type="text/css">
.bt-icons i {
font-size: 30px;
}
</style>
</head>
<body>
<main class="container">
<div class="flex justify-center">
<h1>Install Bootstrap in Laravel with CoderAdvise.com</h1>
</div>
<div class="bt-icons">
<i class="bi bi-airplane-fill"></i>
<i class="bi bi-apple"></i>
<i class="bi bi-balloon-heart"></i>
</div>
</main>
</body>
</html>
To view the result, run the Laravel application on the development server:
php artisan serve
Visit the following URL in your browser to see the result:
- Author: Ahmed Bouchefra Follow @ahmedbouchefra
-
Date:
Related posts
How to use new Dumpable Trait in Laravel 11 Creating Custom Validation Rules in Laravel 11 How to Create Custom Middleware in Laravel 11 How to Create Custom Middleware in Laravel 11 How to Install Laravel 11 Application How to Create Routes in Laravel 10 How to Generate App Key in Laravel 11? How to Add Bootstrap 5 to Laravel 11 Build an app with Laravel 11 and MySQL Livewire 3 refresh component Building a RESTful API CRUD Application with Laravel 11 Should I use Livewire in Laravel? Laravel 11 new features & release date Laravel 10 CRUD Tutorial Laravel 10 CORS Explained in Detail Laravel 7/6 Auth Tutorial: Login/Register/Password Reset Example PHP Laravel 7/6 Tutorial: CRUD Example App with Bootstrap 4 and MySQL Database Laravel 7/6 Database Migrations Tutorial with Admin Roles Example Laravel 7/6 Email Verification Tutorial and Example Laravel 7/6 REST API CRUD Tutorial - Build a CRM [PART 2]: Eloquent Models and Relationships Laravel 6/7 Tutorial & New Features - Creating and Migrating a MySQL Database Laravel 7/6 CORS Tutorial and Example How to Install Vue.JS in Laravel 7/6 By Example How to Install Laravel 7 On Ubuntu, Windows and macOS How to Install Bootstrap 4 in Laravel 7/6 Tutorial and Example