12

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?

LogicalAnt
  • 907
  • 3
  • 12
  • 28
  • it should be somewhere in the `public` folder. Then include it like always in html, but now somewhere in your blade – online Thomas Feb 24 '17 at 15:56
  • I actually don't understand you.But assets compiling from assets directory and those js and css file importing bootstrap 3 ,thats the problem I think. – LogicalAnt Feb 24 '17 at 16:10
  • @unreleased have you updated the paths to Bootstrap in your assets? For example in your Scss https://github.com/laravel/laravel/blob/master/resources/assets/sass/app.scss#L9. – drmonkeyninja Feb 24 '17 at 16:15

4 Answers4

19

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";
EddyTheDove
  • 12,979
  • 2
  • 37
  • 45
  • prevoiusly tried `@import "node_modules/bootstrap/scss";` and got some error. Now its solved.Thank you :) – LogicalAnt Feb 24 '17 at 16:56
  • 2
    @unreleased, you may also want to load the script of bootstrap4, if you do, change`require(bootstrap-sass');` with `require('bootstrap');` in `resources/assets/js/bootstrap.js` – motia Feb 24 '17 at 17:02
  • also ```npm install popper.js``` – Simion Apr 11 '18 at 11:20
10

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

Simon Schnell
  • 1,160
  • 14
  • 24
Rahul
  • 2,011
  • 3
  • 18
  • 31
  • Editing webpack.mix.js is unnecessary since app.js requires bootstrap.js, which requires both jQuery and Bootstrap. – Mooncake Sep 15 '17 at 10:06
1

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

OpSocket
  • 997
  • 11
  • 19
0

1.npm install

2.npm install bootstrap@4.0.0-alpha.6

3.Change the path of bootstrap in "resources/assets/sass/app.scss" to @import "node_modules/bootstrap/scss/bootstrap.scss";

4.Change $font-size-base: 14px; in variable.scss to $font-size-base:0.875 rem;

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

  1. run npm install & run npm dev

bootstrap 4(check out in app.css) will be installed to your laravel 5.4 or lesser version, since laravel 5.4 or less uses bootstrap version 3.4.1 all the default styles will change and inbuilt laravel UI will change.

Punith
  • 1