4

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?

enter image description here

Karl Hill
  • 12,937
  • 5
  • 58
  • 95
Pablo Curumaco
  • 41
  • 1
  • 1
  • 4
  • Try updating the path from `~bootstrap/scss/bootstrap` to `./bootstrap/scss/bootstrap`. I think `~`refers to your home directory; unless there's an extra use I'm unaware of – haakym Dec 12 '18 at 22:37

2 Answers2

7

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"
Marcin Nabiałek
  • 109,655
  • 42
  • 258
  • 291
  • 1
    Thanks for your response and for the `node_modules` information, I really did not know what it meant. But still, they still do not have the styles of Bootstrap 4.1.3, I know because when I put Bootstrap via CDN the styles work correctly, but it's not what I need. I need to be able to work with the Bootstrap styles within my project. – Pablo Curumaco Dec 13 '18 at 15:39
  • Right as seen on this video: [_Installing AdminLTE 3 on Laravel 5.7 and Bootstrap 4_](https://www.youtube.com/watch?v=CowsopJhX3M). – Pathros Feb 17 '19 at 18:02
7

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!

J. Robinson
  • 931
  • 4
  • 17
  • 45