November 5, 2023
Category : Laravel
Laravel 10 Bootstrap Auth Scaffolding Tutorial
Hello Artisan,
This simple article demonstrates of laravel 10 install bootstrap 5. let’s discuss about laravel 10 bootstrap auth scaffolding. you can understand a concept of install bootstrap 5 in laravel 10. I would like to share with you laravel 10 authentication scaffolding using bootstrap.
Laravel giver UI package for the easy step of auth scaffolding. Laravel UI provides simple authentication features including login, registration, password reset, email verification, and password confirmation using bootstrap, react, and vue.
In this tutorial, I will give you simple steps on how to install bootstrap 5 and how to create auth scaffolding using bootstrap 5 in laravel 10 version.
So, let's follow bellow steps:
Install Laravel 10
First of all, we need to get a fresh Laravel 10 version application using bellow command, So open your terminal OR command prompt and run bellow command:
composer create-project laravel/laravel example-app
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 scaffolding 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 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:
You can use bootstrap 5 in your blade file as like bellow:
Read Also: Laravel 10 Flash Message Example Tutorial
<!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>
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 10 Clear Cache of Route, View, Config, Event Commands
- Laravel 10 Yajra Datatables Tutorial Example
- Laravel 10 React JS Auth Scaffolding Tutorial
- How to Create Migration in Laravel 10?
- Laravel 10 Mail | Laravel 10 Send Mail Tutorial
- Laravel 10 Vue JS Auth Scaffolding with Vite Tutorial
- Laravel 10 Generate PDF File using DomPDF Example
- Laravel 10 Multiple File Upload Tutorial Example
- Laravel 10 Multiple Image Upload Tutorial Example
- Laravel 10 File Upload Example Tutorial
- Laravel 10 Form Validation Tutorial Example
- Laravel 10 Image Upload Example Tutorial
- Laravel 10 CRUD Application Example Tutorial
;void(0);){kind=link}