Bootstrap 4 is way overdue...

The beta is out so I use in in my new projects now... To replace bootstrap 3 in a new installation of laravel (5.5 as of this writing) simply do the following:

Crate a new Laravel app... then, befor you run npm/yarn install...

In package.json, you need to replace "bootstrap-sass": "^3.3.7", with "bootstrap": "4.0.0-beta". Your package.json devDependencies will now look like this:

{
    
    "devDependencies": {
        "axios": "^0.16.2",
        "bootstrap": "4.0.0-beta",
        "cross-env": "^5.0.1",
        "jquery": "^3.1.1",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "vue": "^2.1.10"
    }
}

We then need to fix our resources/assets/sass/app.scss file. Change the import to point to the right scss file


// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap.scss";

Then fix any px value we have in the _variables.scss file to rem. Note that 14px is .875rem ...

Now in resources/assets/js/bootstrap.js, replace require('bootsrap-sass'); with require('bootstrap');

That is it! Now you can run

npm install

then

npm run dev

and it should compile just fine.

Note that pagination styles are a different with BS4 so you will have to addapt the out of the box Laravel pagination if you use it...

Welcome

Hi, my name is Serge Lachapelle, a nerdy entrepreneur from Montreal, Canada. I love tech, startups, business and freedom in general. I share my experiences here as I re-invent the way I work. Let's connect and create something cool...