How to use bootstrap 4 in Laravel 5.4?

Question

I installed bootstrap 4 using npm on my laravel app. But I think bootstrap 3 working behind not bootstrap 4.
using command:

npm install

npm install bootstrap@4.0.0-alpha.6

Did I left something to do? Or do I need to manually import bootstrap to assets/sass/app.scss file or else?

Answer 1

You have to manually change the link to bootstrap from resources/assets/sass/app.scss. You will see this line

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; 

Replace with

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

Answer 2

Do flowing with new or empty Laravel project.

• remove the bootstrap entry from package.json and replace it with "bootstrap": "4.0.0-alpha.6".
• In resources/assets/sass/app.scss, comment out the import of variables.
• Change the path of bootstrap to @import "node_modules/bootstrap/scss/bootstrap.scss";

• In resources/assets/js/bootstrap.js, look for require('bootsrap-sass'); and change it to require('bootstrap');

• Bring in the javascript by editing the webpack.mix.js.

JavaScript

mix.js([
    'node_modules/jquery/dist/jquery.min.js',
    'node_modules/bootstrap/dist/js/bootstrap.js',
    'resources/assets/js/app.js'], 'public/js');
mix.sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/admin.scss', 'public/css/admin'); /* If you want to make admin css file. */

• run $ npm install

• Check node_modules folder for bootstrap and jquery is install properly. If not install then install manually.

• For bootstrap4 $ npm install bootstrap@4.0.0-alpha.6

• For jquery $ npm install jquery

If all goes well, you should be able to run npm run dev.

Note: If you need tether.js then use cdn or install manually. Because bootstrap@4 required tether.js for tooltip.

Source

Answer 3

You need to comment out the @import "variables"; line from resources/assets/sass/app.scss

The import directive is called 2 times, one in app.scss and then in the bootstrap.scss file from the installation directory