Laravel 8 Authentication using Bootstrap 4 instead of Tailwind
Tags: laravel
Published: 2020-10-09 03:21:07

---
title: Laravel 8 Authentication using Bootstrap 4 instead of Tailwind
published: true
date: 2020-10-09 00:00:00 UTC
tags: laravel
canonical_url: https://www.parthpatel.net/laravel-8-bootstrap-auth-scaffolding/
---

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.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#1-create-laravel-project)1) Create Laravel Project

If you have installed **Laravel Installer** (You can follow instructions from our [Laravel Beginner Tutorial](/laravel-tutorial-for-beginner/)) 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
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#2-install-laravelui)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
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#3-install-bootstrap-in-laravel)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.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#4-install-npm-packages)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
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#5-database-migration)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
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#6-run-development-server)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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ug1yrt469sv1596j6leq.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b73h9xrl8k6cgmtq8k1w.png)

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](https://parthpatel.substack.com/subscribe)