Install Bootstrap 5 in Laravel 10
Last updated on October 3, 2023
Are you looking to use Bootstrap 5 in the Laravel framework? Yes, it is a good choice.
Laravel simplifies backend development, while Bootstrap provides frontend design components and styles. Together, they can help you create powerful and visually appealing web applications.
In this article, I will help you in installing Bootstrap 5 in Laravel 10. Let’s begin with installing a fresh copy of the Laravel framework.
Step 01: Install the Fresh Laravel Application
Open the terminal and run the following command to install Laravel with the project name laravel-with-bootstrap:
composer create-project laravel/laravel laravel-with-boostrapIn case you installed the Laravel installer then you can also use the following command to install it.
laravel new laravel-with-bootstrapNote: I use Laragon for managing Laravel and other PHP-based web applications. It is similar to WAMP/Xampp local web environment and it has an all-in-one solution to get started quickly. Here’s a guide for installing Laragon on Windows.
Once the Laravel is installed then change the directory in the terminal and enter into the Laravel project.
cd laravel-with-boostrapStep 02: Install Laravel UI Package
In this step, run the below command that installs the UI package.
composer require laravel/ui --devThe installation process typically takes only a few seconds.
Step 03: Bootstrap Auth Installation
Next, let’s install the Bootstrap CSS framework along with auth scaffolding in the application. To do so, run the following command in the terminal:
php artisan ui bootstrap --authBut what happens when you run this command? It makes several changes in the Laravel application for authentication:
- It generates routes in the
routes/web.phpfile. - It creates controllers for user registration, login, and reset password.
- It generates Blade views for these authentication pages.
- It creates a migration for the
userstable.
Step 04: Install Bootstrap Icon
After the bootstrap installation, I need to install the icon as well. To do that, run the below command in the terminal,
npm install bootstrap-icons --save-devSimilar to Step 01, it takes only a few seconds to complete.
Once the bootstrap icon is installed, you need to import icons in the app.scss file. So go to resources/sass/ directory and open app.scss file. Copy the below line and paste at the end of the file,
@import 'bootstrap-icons/font/bootstrap-icons.css';In other words, your app.scss file should look like below,
// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons.css';Next, build the CSS and JS files through the following commands,
npm installOnce it is complete, then run the below command,
npm run devIn the last step, I removed all the code from welcome.blade.php file from views directory and added below,
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
<style type="text/css">
.bt-icons i{
font-size: 30px;
}
</style>
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</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 see the result, run the below command that will run the Laravel application on the development server,
php artisan serveGo to the browser and run the below URL to see the result,
http://127.0.0.1:8000/
Related Posts