⇨ Click here for the table of contents for Laravel articles

This article summarizes how to deal with not being able to use Bootstrap in Laravel.

Introduction

In Laravel 6 and earlier versions, Bootstrap is set up to be usable from the beginning.

When Bootstrap:

1. Can be used on the first page but
2. Cannot be used on newly added pages

or for those who:

Don't really understand why Bootstrap can be used

this article is for you.

Can be used on the first page but not on newly added pages

This is because the CSS and JS files where Bootstrap is located are:

1. Loaded on the first page, but
2. Not loaded on newly added pages

This CSS and JS files containing Bootstrap are specifically:

1. public/js/app.js
2. public/css/app.css

The first page, by default, is welcome.blade.php, so let's take a look at that.

welcome.blade.php

Where is this file being loaded?

There is a line at the top that looks like this.

extends('layouts.app')

This extends defines the use of Laravel's common template.

So, where is the common template located?

Since layouts.app is a path relative to resources/views,

It can be found in resources/views/layouts/app.blade.php

This file is the location of the default template file.

Within the head tag of this file, you can see:

<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />

As shown above, there are lines to load app.css and app.js, which is why Bootstrap can be used.

When Bootstrap cannot be used on any page from the beginning

First, right-click -> inspect to open developer tools and look at the console.

If app.css or app.js is giving a 404 error, try running the following command:

npm run watch

or,

npm run dev

This should generate public/css/app.css and public/js/app.js, making them usable.

For more details, check out:

Resolving 404 NOT FOUND for app.js and app.css in Laravel

where it is explained.

Possibility that Bootstrap is not configured to be used

Bootstrap can be used because Bootstrap is installed, and there is a configuration to build using it.

resources/js/app.js

require("./bootstrap")

resources/js/bootstrap.js

require("bootstrap")

package.json (contents may vary depending on the Laravel version)

"bootstrap": "??.?.?"

This kind of configuration is already present.

What if the configuration is not there?

Without the configuration, Bootstrap cannot be used.

Possibly, in cases like Laravel 8 where Bootstrap is not included by default, the configuration may be missing.

Since there is a trend to use Tailwind from Laravel 8 onwards, in such cases, it might be better to use Tailwind instead of forcing Bootstrap.

Summary

That's all.

I have summarized the key points to check when Bootstrap cannot be used in Laravel.

I hope it can be helpful for someone.

For feedback or complaints, please contact me through Twitter DM.

That's all!

Popular Articles

Deploying a PHP 7.4 + Laravel 6 Project to AWS EC2

Implementing Breadcrumbs in Laravel with laravel-breadcrumbs