Laravel 12 Bootstrap Auth Scaffolding Tutorial

By Hardik Savani March 8, 2025 Category : Laravel

In this article, I will show how to install Bootstrap auth scaffolding in a Laravel 12 application.

Laravel provides a UI package for the easy setup of auth scaffolding. Laravel UI offers simple authentication features, including login, registration, password reset, email verification, and password confirmation, using Bootstrap, React, and Vue.

In this tutorial, I will provide you with simple steps on how to install Bootstrap 5 and how to create auth scaffolding using Bootstrap 5 in Laravel 12.

So, let's follow the steps below:

laravel 12 bootstrap auth

Install Laravel 12

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

laravel new example-app

Install Laravel UI

Let's run the below command to install the Laravel UI package:

composer require laravel/ui

Next, you have to install the Laravel UI package command for creating auth scaffolding using Bootstrap 5. So let's run the below command:


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

Now, let's run the below command to install npm:

It will generate CSS and JS min files.

Next, run the migration command:

php artisan migrate

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:

laravel 12 bootstrap home

Login Page:

laravel 12 bootstrap login

Register Page:

laravel 12 bootstrap register

Dashboard Page:

laravel 12 bootstrap dashboard

You can use Bootstrap 5 in your blade file as shown below:

Read Also: How to Send Email using Gmail in Laravel 12?

<!doctype html>
<html>
<head>
    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    <h1>This is example from ItSolutionStuff.com</h1>
</body>
</html>

Output:

I hope it can help you...

Tags :
Previous

How to Send Email using Gmail in Laravel 12?
Next

How to Create Custom Helper Functions in Laravel 12?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares