Laravel 12: Blade Starter Kit with Bootstrap UI & Authentication

By: Tutorial Tools Laravel, PHP March 01, 2025

Step-by-step guide to set up a Laravel 12 project with Bootstrap & authentication. Perfect for beginners & pros. Build a functional Laravel 12: blade starter kit with ease!

Laravel 12: Blade Starter Kit with Bootstrap UI & Authentication Image

Are you ready to dive into Laravel 12, one of the most popular PHP frameworks, and build a robust web application? Whether you're a beginner or an experienced developer, this step-by-step guide will walk you through setting up a Laravel 12 project with Bootstrap and authentication.

By the end of this tutorial, you'll have a fully functional Laravel 12 Blade starter kit ready for further development.

Why Laravel?

Laravel is known for its elegant syntax, powerful features, and robust ecosystem. It simplifies tasks like routing, authentication, and database management, making it a favourite among developers. Pairing Laravel with Bootstrap ensures a responsive and visually appealing user interface, while the built-in authentication system saves you time and effort.

Let’s get started!

Before Start must remember you must have Install php >=8.2

Step 1: Set Up a Laravel 12 Project

You have two options to create a new Laravel project:

Option 1: Using Composer
This method is not mention in Laravel 12 documentation still we can use it.
Run the following command in your terminal:
```
composer create-project laravel/laravel blade-starter-kit
```
Option 2: Using Laravel Installer
If laravel installer is not installed in your system then you ca install laravel installer via below command
```
composer global require laravel/installer
```
If you prefer using the Laravel installer then , run this to create project:
```
laravel new blade-starter-kit
```
If you see these new starter kits of laravel 12 then you are on right way and if you still see old one then you have to update your laravel installer by below given method.
Troubleshooting Tip: If the Laravel installer doesn’t work or old version then, update it by running:
```
composer global remove laravel/installer
composer global require laravel/installer
```
then you can see latest starter kit option and you have to select none option from these.

Step 2: Navigate to the Project Directory

Once the project is created, navigate to the project folder:

cd blade-starter-kit

Step 3: Install Laravel UI Package

Laravel UI is a package that provides a simple way to scaffold basic authentication and frontend templates.

Install it using Composer:

composer require laravel/ui

Step 4: Install Bootstrap UI with Authentication

To set up Bootstrap along with authentication views, run:

php artisan ui bootstrap --auth

This command will generate the necessary views and configure Bootstrap for your project.

Step 5: Run Migrations

Laravel comes with a default migration for users. Run the migrations to create the necessary database tables:

php artisan migrate

Step 6: Install Node Modules

To compile your frontend assets, install the required Node modules:

npm install

Step 7: Compile Assets

Compile your CSS and JavaScript assets using one of the following commands:

For development:
```
npm run dev
```
For production:
```
npm run build
```

Step 8: Run the Project

Start the Laravel development server:

php artisan serve

Your application will be accessible at http://localhost:8000.

Step 9: Customize the Welcome Page

By default, the Laravel welcome page is built with Tailwind CSS. However, you can easily customize it to use Bootstrap or your own design. To modify the welcome page, open the resources/views/welcome.blade.php file and update it with your preferred content, styles, and functionality. Alternatively, you can simply copy and paste the code provided below to get started quickly.

<!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 12</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">MyApp</a>
            <div class="d-flex">
                @if (Route::has('login'))
                    <div class="ms-auto">
                        @auth
                            <a href="{{ url('/home') }}" class="btn btn-primary">Home</a>
                        @else
                            <a href="{{ route('login') }}" class="btn btn-outline-primary me-2">Login</a>

                            @if (Route::has('register'))
                                <a href="{{ route('register') }}" class="btn btn-primary">Register</a>
                            @endif
                        @endauth
                    </div>
                @endif
            </div>
        </div>
    </nav>

    <div class="container text-center mt-5">
        <h1>Welcome to Laravel 12 with Bootstrap</h1>
        <p class="lead">This is a simple welcome page with Bootstrap styling.</p>
    </div>
</body>

</html>

Step 10: Test the Authentication System

Visit http://localhost:8000/login to see the login page. You can register a new user, log in, and test the authentication system. Laravel’s built-in authentication makes it easy to manage user registration, login, and password reset functionality.

all code is available in git hub repository:

https://github.com/cmwebsolution/laravel-blade-starter-kit

Conclusion

Congratulations! You’ve successfully set up a Laravel 12 project with simple Blade using Bootstrap ui and authentication. This starter kit is a great foundation for building more complex web applications using blade without using any existing starter kit. From here, you can add more features, customize the design, and scale your application as needed.

Laravel’s simplicity and flexibility, combined with Bootstrap’s responsive design, make this stack a powerful choice for modern web development. Happy coding!

Tags