How to install Bootstrap 5 in Laravel 9?

Feb 14, 2022 . Admin

Hi Dev,

In this tutorial how to install bootstrap 5 in laravel 9?. In this tutorial, you will learn how to build a login, register, logout, forget the password, profile and reset password page by using laravel ui and bootstrap in laravel 9. In this article we will cover on how to implement laravel 9 npm install bootstrap 5. we will help you to give example of install bootstrap for laravel 9. you can see laravel 9 install bootstrap 5.

First of all, we will let you know about the bootstrap 5 ui and auth package. In the Laravel 9 adds bootstrap ui and auth package for login, register, logout, reset password, forget the password, email verification, two-factor authentication, session management.

In this laravel 9 bootstrap auth example tutorial, we will use the laravel Ui and BOOTSTRAP Auth to implement default login, register, reset the password, forget the password, email verification, and two-factor authentication blade views and controller file.

Laravel 9 Auth using laravel ui with boostrap auth will look like in following images:

Step 1: Download Laravel

Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

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

Next, you have to install the laravel UI package command for creating auth using bootstrap 5. so let's run the bellow command:

php artisan ui bootstrap
  
OR
  
php artisan ui bootstrap --auth

Now let's run bellow command for install npm:

npm install && npm run dev

It will generate CSS and js min files.

Next run migration command:

php artisan migrate
Run Laravel App:

All steps have been done, now you have to type the given command and hit enter to run the laravel app:

php artisan serve

Now, you have to open 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: You can use bootstrap 5 in your 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 MyWebtuts.com</h1>
</body>
</html>

I hope it can help you...

#Laravel 9

You might also like...