The Right Way to Activate Bootstrap in Laravel »Small Business Fire

The Right Way to Activate Bootstrap in Laravel »Small Business Fire

Bootstrap is a free and open source CSS framework for responsive and mobile first front-end web development. It contains HTML, CSS, and Jav

8 Key Ways to Give Customers a Great Delivery Experience »Small Business Fire
SEO Competitor Analysis Web Scraper »Small Business Fire
5 Strategies for Aspiring Leaders »Small Business Fire

This post may contain affiliate links, which means that I may earn a commission if you click on the link & sign-up or make a purchase. You will NOT be charged extra for using the link, but it goes a long way in supporting this blog. I only recommend products or services that I have personally used or believe will add value to my readers.

Bootstrap is a free and open source CSS framework for responsive and mobile first front-end web development. It contains HTML, CSS, and JavaScript-based design layouts for typography, shapes, buttons, route, and other interface components. This popular framework has a responsive grid system for layout, pre-built components for design patterns and JS plug-ins for user interaction.

In this article, I will introduce you to Bootstrap, and how to install it within your Laravel 9 application.

What is Bootstrap?

Bootstrap speeds up web development and makes it easier. It responds design and compatible with a variety of browsers. It offers reliable design through reusable components, and it’s extremely easy to use and learn.

Bootstrap uses JavaScript, a built-in backend for jQuery plugins, and a programmatic JavaScript API. It can be used with any IDE or free PHP editors, and any server-side language and technology, from ASP.NET and Ruby on Rails to PHP. The Bootstrap UI is a consistent library of designs for beautiful and intuitive web applications.

With Bootstrap, web designers can focus on improvements without stressing over design, to get an interactive website up and running quickly. It also offers web architects a strong undertaking to create interesting Bootstrap themes.

How to install Bootstrap 5 in Laravel 9?

Follow this step-by-step guide to using laravel bootstrap.

1) Install Laravel Project

Perform the following command to install a new Laravel project from scratch.

composer create project laravel / laravel –preference-dist laravel-bootstrap

To use the newly created Laravel application:

cd laravel-bootstrap

2) Install Laravel / UI

The Laravel UI is an official library of specific or predefined UI components. It provides a login and enrollment platform for Respond, Vue, jQuery and Bootstrap formats.

Perform this command to install Laravel / UI:

composer requires laravel / UI

3) Install Bootstrap in Laravel

Follow these steps to install the Bootstrap CSS framework in your Laravel project:

php artisan up Bootstrap

4) Install Bootstrap Auth Scaffolding

Perform the following command to install the auth scaffoldings:

php artisan up Bootstrap –auth

This completes Bootstrap’s installation process. To make sure it is properly installed, go to resource / js / bootstrap.js. You’ll see that popper.js and jQuery have been added to Bootstrap’s JavaScript file.

5) Install Bootstrap packages

Let’s now install the Bootstrap packages for the associated front-end component.

Before moving forward, make sure you have Node installed on your local development system with the following command:

# for node

node -v

# for npm

npm -v

Finally, install the Bootstrap package and related front-end dependencies like jquery from npm with the following command:

install npm

6) Assemble assets

The resources / sass folder _variables.scss and app.scss files will be added along with sass variables and fonts.

// Fonts

@import url (‘https://fonts.googleapis.com/css?family=Nunito’);

// Variables

@import ‘variables’;

// Bootstrap

@import ‘~ bootstrap / scss / bootstrap’;

Now perform the task below for asset composition.

# for development

npm run dev

Perform the command below to compile CSS and JavaScript files from resources / js and resources / sass folder to the public folder.

# for production

npm run production

7) Automate SASS and JS changes

If you do not want to run the npm run dev command every time you make changes to SASS and JS file, use the following command.

npm run watch

It will monitor your files and compile code automatically if it detects any changes in SASS and JS files.

8) Use Bootstrap in Laravel Blade Template

The sass files are now compiled into a single CSS file in the public folder. We can define the js and css path and use the Bootstrap js and css in the Laravel blade template.

getLocale ())}} ”>

{{config (‘app.name’, ‘Laravel’)}}

Tutorial created by Positronx.io


    error: Content is protected !!