laravel

LARAVEL 8 – Bootstrap 5

1. LARAVEL 8 - Introduction

Since version 8 Laravel uses Tailwind CSS as its main CSS framework. Allthough being a first class CSS framework, developing using Tailwind CSS requires a lot of work because you’ll have to develop every reusable component from scratch yourself.

In the past a lot of developers, like myself, used Bootstrap. Laravel has dropped Bootstrap support since version 8. The easiest way to keep using Bootstrap in Laravel 8 is by creating a new Laravel project and then using the two commands :

composer require laravel/ui
php artisan ui bootstrap --auth

This installs the previous version Bootstrap 4.6.x and adds some scaffolding in case you use the – – auth option. 

For those of us who want to keep using Bootstrap, there’s a simple way to create a new Laravel project using the latest Bootstrap 5 framework.

Tip :

If you’re looking for an excellent Local Web Development Server to develop your PHP based applications in a Microsoft Windows environment, please read my posts regarding Laragon.

2. LARAVEL 8 - Create a new project

Start by creating a new Laravel project :

composer create-project laravel/laravel your-project-name

Then cd into the newly created project folder and install the Laravel UI package :

composer require laravel/ui

This legacy package is a very simple authentication scaffolding built on the Bootstrap 4 CSS framework.

Generate the Bootstrap scaffolding :

php artisan ui bootstrap --auth	

This installs Bootstap 4.6 and generates the files needed for authentification.

3. LARAVEL 8 - Install Bootstrap 5

Now let’s install Bootstrap 5 :  

npm install bootstrap@latest bootstrap-icons @popperjs/core --save-dev

This updates Bootstrap 4.6.x to version 5.x and adds the Bootstrap Icons and popper.js version 2.
Do not remove popper.js version 1!

4. LARAVEL 8 - Configure .env

Now open your project in your favorite code editor. I use Visual Studio Code.

Check and addapt all settings, especially the database connection and the mail settings.

5. LARAVEL 8 - Import Bootstrap Icons

Inside your project, open the file resources\sass\app.scss and add : 

@import '~bootstrap-icons/font/bootstrap-icons';

6. LARAVEL 8 - Replace the scaffolding files

Inside your project, replace the Bootstrap 4 scaffolding files by the ones you can download here.

So replace the content of your projects /resources/views/ folder by the folder in the downloaded ZIP archive.

7. LARAVEL 8 - Build the application

Now create the database tables : 

php artisan migrate

Then let’s finalize the setup :

npm install
npm run dev

If the npm run dev command throws errors concerning missing dependencies, just run the command a second time.
Normaly all should be OK now and you can start developing your own Laravel 8 Bootstrap 5 application.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.