Bootstrap 4 Installation With Laravel 5.7

Question

I am trying to compile my app.scss file that comes with my new project from Laravel, but I want to install Bootstrap 4. At the time of doing my npm run dev does not install Bootstrap 4, but it still has the Bootstrap that Laravel brings by default.

Any recommendations or documentation for this?

Solution 1

If you look in the Laravel welcome.blade.php file, you can see some CSS and a link tag that imports a Google Font. This is not to be confused with actually importing Bootstrap 4.

Heres the steps to take to implement Bootstrap 4, and all the other cool things that come with Laravel by default. It already seems as though you've run npm run watch so I'm going to assume you've run that command.

Simple Steps

Add a link tag to your head element:

<link rel="stylesheet" href="css/app.css">

Add the following at the bottom of your body element:

<script src="js/app.js" charset="utf-8"></script>

That should do it for you. But please make sure you've compiled the SCSS files and Javascript files using the npm run watch command or else it won't work!

Cheers!

Solution 2

In fact Laravel comes with Bootstrap 4 by default. If you take a look at https://github.com/laravel/laravel/blob/master/package.json file (you should have package.json in your project too) you will see line:

"bootstrap": "^4.0.0"

what means Bootstrap 4 will be installed.

You should run

npm install

to install all packages and by default it will install Bootstrap 4.

This ~ sign mean here node_modules directory so in fact line

@import "~bootstrap/scss/bootstrap"

means

@import "node_modules/bootstrap/scss/bootstrap"