Laravel 12 - Authentication Using Laravel UI & Bootstrap 5
Laravel 12 - Authentication Using Laravel UI & Bootstrap 5
In this tutorial, you'll learn how to set up Laravel 12 authentication using Laravel UI and Bootstrap 5. Follow this step-by-step guide to install, configure, and build a login & register system with Bootstrap styling.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide walks you through setting up a fresh Laravel project with Bootstrap authentication. You'll create a new Laravel project, configure the database, and install the Laravel UI package. After generating Bootstrap-based authentication scaffolding, you'll install dependencies, compile assets, and migrate the database. The guide also addresses a styling issue on the welcome page by modifying welcome.blade.php and optimizing the cache. Finally, you'll start the Laravel development server, register a new account, and access the authenticated dashboard. By the end, you'll have a fully functional Laravel application with Bootstrap styling and authentication in place.
Step # 1 : Create fresh Laravel project.
Note : If Laravel isn’t installed globally, you must install it first. Assuming Composer is already installed, run the following command.
composer global require laravel/installer
Next, run the following command to create a new Laravel project using the global Laravel installer.
laravel new Bootstrap5
After running the command, you’ll be prompted with the following options.
- Which starter kit would you like to install? → Select None
- Which database will your application use? → Select MySQL
- Default database updated. Would you like to run the default database migrations? → Type No
- Would you like to run npm install and npm run build? → Type No
After running the command and responding to the prompts, Laravel will create a new project named Bootstrap5 with the default directory structure. No starter kit will be installed, the database will be set to MySQL without running migrations, and npm dependencies won’t be installed or built. This results in a minimal setup, ready for further configuration and customization.
Step # 2 : Access the project.
Open a terminal (Git Bash, Command Prompt, or Terminal) and move to your Laravel project's root directory using.
cd c:xampp/htdocs/Bootstrap5
From there, you can execute commands to start the server, install dependencies, or adjust configurations.
Step # 3 : Install the Laravel UI Package.
Install the Laravel UI package in your project by running the following Composer command.
composer require laravel/ui
After running this command, Laravel UI will be installed, allowing you to generate authentication scaffolding with Bootstrap. The scaffolding won’t be applied automatically and must be generated manually.
Step # 4 : Generate Frontend Scaffolding.
To set up the frontend, generate the authentication scaffolding with Bootstrap by running the following Artisan command.
php artisan ui bootstrap --auth
After running this command, Laravel will generate authentication views, routes, and controllers using Bootstrap as the frontend framework. You will be prompted with the following message.
The Controller.php file already exists. Do you want to replace it?
Type Yes to overwrite the existing Controller.php file. This ensures that Laravel applies the latest authentication logic and necessary configurations.
Step # 5 : Install Node Dependencies and Compile Assets.
To set up the frontend assets, you need to install the required Node.js packages. Run the following command.
npm install
This will download and install all necessary dependencies, including Bootstrap, Vite, and other frontend-related packages defined in package.json, after which you can compile the assets using.
npm run dev
This command will process CSS and JavaScript files and start the Vite development server. After running it, you’ll see output similar to
VITE v6.2.2 ready in 461 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
LARAVEL v12.2.0 plugin v1.2.0
➜ APP_URL: http://localhost
Since Vite runs continuously to watch for file changes, you must keep this terminal open. To run additional commands, open another instance of Git Bash or your terminal.
Step # 6 : Run Database Migrations.
Run the following command to migrate the database.
php artisan migrate
If the database doesn’t exist, you may see the following warning.
WARN The database 'Bootstrap5' does not exist on the 'mysql' connection.
Would you like to create it? → Type Yes
Type Yes to create the database and proceed with the migrations.
Step # 7 : Let's see it in Action.
Start the Laravel development server with.
php artisan serve
Then, open 127.0.0.1:8000 in your browser to access it.
When you run the Laravel project, you might see a broken or misaligned default welcome page, with text overlapping and elements not displaying correctly. This issue occurs because the frontend assets, such as styles and scripts, are either missing or not properly compiled. As a result, the page appears unstyled and incomplete. Additionally, the issue can arise if the @vite directive is wrapped inside a conditional check, preventing styles from loading correctly when certain conditions aren't met.
Fixing the Styling Issue on the Laravel Welcome Page :
Open resources/views/welcome.blade.php and remove the @if, @else, and @endif conditions. The issue occurs because the @vite directive is inside a conditional check, preventing styles from loading properly. To fix it, remove these conditions but keep the <style> tag intact. Save the file to apply the changes.
From :
<!-- Styles / Scripts -->
@if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
@vite(['resources/css/app.css', 'resources/js/app.js'])
@else
<style>
/*! tailwindcss v4.0.7 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:'Instrument
.....
...
...
</style>
@endif
To :
<style>
/*! tailwindcss v4.0.7 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:'Instrument
.....
...
...
</style>
After modifying the welcome.blade.php file, Laravel may still serve cached views or configurations, preventing the updates from taking effect immediately. To ensure Laravel correctly applies the latest changes, you need to clear and optimize the cache. Run the following command in your terminal
php artisan optimize:clear
This will remove cached configurations, routes, and views, forcing Laravel to regenerate them with the latest updates.
You can now visit the Register page at 127.0.0.1:8000/register, where you will see Laravel UI’s Bootstrap-based authentication system in action. This setup provides a fully functional registration form with a responsive design, leveraging Bootstrap 5 for styling and layout.
After completing the registration, you will be redirected to the Dashboard at 127.0.0.1:8000/dashboard, confirming that Laravel UI's Bootstrap-based authentication is successfully implemented and working.
Conclusion
By following this guide, you successfully set up a fresh Laravel project with Bootstrap authentication, configured the database, and resolved styling issues on the welcome page. You also learned how to install dependencies, compile assets, and optimize the cache to ensure smooth performance. With authentication in place, you can now extend your project by adding new features, customizing the UI, or integrating additional functionalities. Whether you're building a simple app or a complex system, Laravel provides the flexibility and power to scale efficiently.
For more details, refer to the official Laravel UI package documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments