1. LARAVEL 11 - 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 11 is by creating a new Laravel project and then using the two commands :
composer require laravel/ui --dev
php artisan ui bootstrap --authThis installs the latest version Bootstrap 5.3.3 and adds some scaffolding in case you use the – – auth option.
For those of us who want to keep using Bootstrap, this is 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 11 - Build the application manually from scratch
a. Create a new Laravel project
Start by creating a new Laravel project :
composer create-project laravel/laravel your-project-nameThen cd into the newly created project folder and install the Laravel UI package :
composer require laravel/ui --devThis legacy package is a very simple authentication scaffolding build on the Bootstrap 5 CSS framework.
Generate the Bootstrap scaffolding :
php artisan ui bootstrap --auth This installs Bootstap 5.3.3 and generates the files needed for authentification.
b. Configure the .env file
c. Import Bootstrap Icons
Install the bootstrap icons library.
npm install bootstrap-icons --save-devInside your project, open the file resources\sass\app.scss and add :
@import 'bootstrap-icons/font/bootstrap-icons.css';
d. Finalize the application
Now create the database tables :
php artisan migrateThen let’s finalize the setup :
npm install
npm run dev
Normaly all should be OK now and you can start developing your own Laravel 11 Bootstrap 5 application.
2. LARAVEL 11 - Build the application by cloning the GitHub repository
An empty demo Laravel 11 project containing Bootstrap 5 is available on GitHub.
a. Clone the GitHub repository
Inside the root folder of your local web development environment, open a new terminal window.
Enter the command :
git clone https://github.com/MGeurts/laravel-11-bootstrap-5.git .Change directory into the newly created project folder.
b. Install Composer Dependencies
Enter the command :
composer installc. Install NPM Dependencies
Enter the commands :
npm install
npm run devd. Create your copy of the .env file
Enter the command :
cp .env.example .enve. Generate an App Encryption Key
php artisan key:generatef. Create an empty database for our application
Use your favorite database management tool to create an empty database.
Configure a username and password.
g. Configure the .env file
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=********MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"h. Migrate the database
php artisan migrate:fresh --seedi. Open the application
You now have a working Laravel 11 application using the Bootstrap 5 framework.
Open a browser and go to the url of your application.
Use the Register button to register yourself.
3. LARAVEL 11 - Extend the application with DataTables
Thanks for this info. I am trying to replace Tailwind with Bootstrap 5 on an already existing Laravel Sail site. Any ideas on doing this? Not concerned about updating views, I’m just stuck on swapping out the libraries.
Hi. Helas I don’t know Laravel Sail so I can’t help.
Me myself, I currently moved away from Bootstrap 5 to using Tailwind CSS and Tailwind Elements.
Success.
Marc
my resources/css/app.css is empty
Yes. That’s normal. You can use it for your own use.
All other CSS is in \resources\sass\app.scss.
Kind regards.
Hi, Congratulations!!!.
I need to use composer require laravel/jetstream … this generate Tailwind CSS.
How do I do it?
Thanks greetings
Laravel Jetstream is an application starter kit build around Tailwind CSS. It is to be used with either the LiveWire or the Inertia scaffolding.
It’s not a good idea to mix Tailwind CSS and Bootstrap.
If you want to use Bootstrap, just follow the article above.
Kind regards.
Marc
Currently, in version 10, it takes some work to use bootstrap.
Every day the Laravel team forgets more about Bootstrap. Now it gives error Vite manifest not found all the time.
Your tutorial is very good.
The Laravel team should see the large community of programmers who use bootstrap.
Feedback:
when running
npm install
npm run dev
php artisan serve
call in browser
Vite manifest not found at:
Only after run
Ctrl+C
npm install
hpm run build
npm run dev
php artisan serve
Thank you.
In a Laravel 9 or 10 project, when using the new Vite asset bundler instead of Mix, you only need these 2 commands on your developent server :
npm install
npm run dev
On your production server, you should only use these 2 commands:
npm install
npm run build
You do not need the “php artisan serve” command!