Laravel 8 Authentication using Bootstrap 4 instead of Tailwind

Laravel 8 has released with a bang! and with it , brought sweeping changes. One such remarkable yet controversial change is Laravel Jetstream. Laravel Jetstream is a beautifully designed application scaffolding and comes with two stacks for Authentication system -

1) Tailwind CSS + Livewire

2) Tailwind CSS + Inertia.js

Now, these two stacks are great, beautiful but very different from Bootstrap/jQuery based stack which developers are used to. So, there is a learning curve for developers if they want to use Laravel's Auth scaffolding which is sad because Laravel does not comes with Bootstrap based Auth scaffolding anymore.

But, that's the beauty of Open Source world. Anyone can modify these systems to their liking or build new plugins or integrations.

Today, we will learn how we can still use Bootstrap based Auth Scaffolding for new Laravel 8 app. We will be using our favourite Laravel/UI package to bring back old Bootstrap based Auth Scaffolding.

1) Create Laravel Project

If you have installed Laravel Installer (You can follow instructions from our Laravel Beginner Tutorial) then simply execute below command:

laravel new laravelauth

else, execute below command:

composer create-project laravel/laravel --prefer-dist laravelauth

then go to your project folder :

cd laravelauth

2) Install Laravel/UI

Laravel UI is an official package that offers basic Auth Scaffolding built on the Bootstrap CSS framework. Latest version of Laravel/UI supports Laravel 8 so we will use this package to import authentication pages, controllers, and other components.

Run below command:

composer require laravel/ui

3) Install Bootstrap in Laravel

Laravel UI offers three options for Auth Scaffolding - 1) Bootstrap, 2) Vue and 3) React. So, we will install bootstrap for our case.

Run below command:

php artisan ui bootstrap --auth

You can observe that we have used —auth flag here. Without that flag, above command will only install bootstrap and basic scaffolding. The —auth flag installs login and registration scaffolding as well.

4) Install NPM packages

We have configured bootstrap and other related dependancies in package.json in previous step, so now we will actually install it.

Before moving forward, make sure you have node installed in your system. You can check node version via below command:

# for node
node -v

# for npm
npm -v

Now, let's install the dependencies and compile our assets.

npm install && npm run dev

5) Database Migration

First, we should configure our database settings. In your .env file located at the root of your project, udpate the database config as per your system. [If you don't find .env file, simply create new one and add the credentials as per the example below] :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

Then, we will create database tables via migration by executing below command:

php artisan migrate

6) Run Development Server

Finally, it's time to test your Laravel Application with Bootstrap based scaffolding. Sometimes, OLD IS GOLD.

php artisan serve

Screenshots:

I hope this article helped you. There is no clear winner in Bootstrap vs Tailwind. It's all about preference. Since, Laravel 8 prefers Tailwind with Livewire or Inertia stack, it might be confusing for developers who wants to use Bootstrap instead. So, start working on your next project.

Adios!

For more tips & tutorial, join my newsletter