Compared to the previous version of Laravel where Bootstrap Framework was the default pre-installed frontend option. In the latest version there have been a lot of changes in the Laravel Framework wherein you have to perform certain steps to use Bootstrap as the frontend framework. Show
Following are the steps to use Bootstrap 4 with latest version of Larvael Install Laravel / ui packageRun the following command to install Laravel's laravel/ui package composer require laravel/ui Install BootstrapOnce you have installed the laravel / ui package, you can now install the Bootstrap framework by running the following comand
If you are looking to generate auth scaffolding as well, then you should run the following command instead
Install and Run NPMNow that we have generated the Bootstrap scaffolding, next up we need to install and run the NPM so that the bootstrap library is compiled Run the following command to install NPM
Run the following command to compile the resources
Now you can use Bootstrap's compiled JS and CSS in your application. 1. LARAVEL 9 - IntroductionSince 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 :
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 9 - Build the application manually from scratcha. Create a new Laravel projectStart by creating a new Laravel project :
Then cd into the newly created project folder and install the Laravel UI package :
This legacy package is a very simple authentication scaffolding built on the Bootstrap 4 CSS framework. Generate the Bootstrap scaffolding :
This installs Bootstap 4.6 and generates the files needed for authentification. b. Install Bootstrap 5Now let’s install Bootstrap 5 :
This updates Bootstrap 4.6.x to version 5.x and adds the Bootstrap Icons and popper.js
version 2. c. Configure the .env fileNow 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. d. Import Bootstrap IconsInside your project, open the file resources\sass\app.scss and add :
e. Replace the scaffolding filesInside 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.
f. Finalize the applicationNow create the database tables :
Then let’s finalize the setup :
Tip : 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. 2. LARAVEL 9 - Build the application by cloning the GitHub repositoryAn empty demo Laravel 9 project containing Bootstrap 5 is available on GitHub. a. Clone the GitHub repositoryInside the root folder of your local web development environment, open a new terminal window.
Change directory into the newly created project folder. b. Install Composer DependenciesEnter the command :
c. Install NPM DependenciesEnter the commands :
d. Create your copy of the .env fileEnter the command :
e. Generate an App Encryption KeyEnter the command :
f. Create an empty database for our applicationUse your favorite database management
tool to create an empty database. g. Configure the .env fileOpen the .env file for editing :
Adjust the DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME and DB_PASSWORD options to match your situation. Also adjust the mail settings:
Adjust the MAIL_HOST, MAIL_PORT, MAIL_USERNAME, MAIL_PASSWORD, MAIL_ENCRYPTION and MAIL_FROM_ADDRESS options to match your situation. h. Migrate the databaseEnter the command : :
i. Open the applicationYou now have a working Laravel 8 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 9 - Extend the application with DataTables
Does Laravel 8 support bootstrap?Does Laravel Use bootstrap? Laravel 8 provide easy way to work with bootstrap, vue and react, The bootstrap directory contains the app. php file which bootstraps the framework.
How does bootstrap 5 integrate with Laravel?Step 1: Install Laravel Project. ... . Step 2: Install Laravel UI For Bootstrap 5. ... . Step 3: Setup Auth Scaffolding with Bootstrap 5. ... . Step 4: Install NPM Dependencies. ... . Step 5: Import vite. ... . Step 6: Update bootstrap.js. ... . Step 7: Import Bootstrap 5 SCSS in JS Folder. ... . Step 8: Replace mix() with @vite Blade directive.. Can I use bootstrap and vue in Laravel?Install Bootstrap and Vue
If you are using Laravel, first install the Laravel composer package- laravel/ui that is already built for you. To do that, just open a terminal from your project root directory, and run: composer require laravel/ui. php artisan ui vue --auth.
Can I use Laravel breeze with bootstrap?Work in progress. Breeze provides a minimal and simple starting point for building a Laravel application with authentication. Styled with Bootstrap, Breeze publishes authentication controllers and views to your application that can be easily customized based on your own application's needs.
|