Tip: Using Bootstrap 4 alpha 6 with Laravel 5.4

Fantastic info. Thanks, @w1n78.

npm run dev posts so much errors: https://gist.github.com/NicolasVanhecke/d5aad035acc45365eef8100886c3aee2 I cant understand what is wrong

Personally i more like copy all BS4 scss to laravel assets folder and import from there.

@Ncls i'm having issues with mix as well related to config, paths, and manifest files. this post was done on a fresh install of laravel 5.4.2 and mix 0.5.3 (if i remember correctly). there are newer versions of laravel and mix. see if you're using the latest versions. i also did this in macOS. there's a lot of posts regarding windows, are you on windows?

to be honest, i'm more of a backend dev. anything frontend related, i'm very bad at. but i try to get more familiar and share my experiences. i don't know what else to suggest. you can also check this post i started. other people shared what they did to fix their problems https://laracasts.com/discuss/channels/elixir/laravel-54-dev-npm-run-dev-error

good luck.

Remember to also exchange the _variables.scss file provided with Laravel under /resources/assets/sass/ with the one supplied with Bootstrap. Otherwise the build will fail due to the usage of rem and pixels.

This solved the problem for me at least.

@SalvoMulas Just import the used _variables.scss than you good to go.

Rad! Thanks for posting

I'm getting no compile errors thru npm run dev, however when I view it in the browser, console spits out this:

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at Object.<anonymous> (app.js:487)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:42368)
    at __webpack_require__ (app.js:20)
    at app.js:66
    at app.js:69
(anonymous) @ app.js:487
__webpack_require__ @ app.js:20
(anonymous) @ app.js:42368
__webpack_require__ @ app.js:20
(anonymous) @ app.js:66
(anonymous) @ app.js:69

my mix code:

mix.js([
        'node_modules/jquery/dist/jquery.min.js',
            'node_modules/bootstrap/dist/js/bootstrap.js',  
        'resources/assets/js/app.js',
        'resources/assets/js/gui.js'
    ], 'public/js/app.js')
   .sass('resources/assets/sass/app.scss', 'public/css/app.css',{precision: 8})
   .copyDirectory('vendor/components/font-awesome/fonts', 'public/css/fonts')
   .sass('vendor/components/font-awesome/scss/font-awesome.scss', 'public/css/app.css');

Clearly, I have jquery listed first, so I'm not sure why bootstrap is trying to trigger before jquery is loaded?

Same problem as @rawrkats right now :/

UPDATE: Fixed it (and the next error that Tether is required) by adding this to webpack.mix.js:

mix.autoload({
  jquery: ['$', 'jQuery', 'window.jQuery'],
  tether: ['Tether', 'window.Tether']
});

(don't forget to run npm run dev again)

Is it impossible to load all Js dependencies with just resources/assets/js/app.js this file?

I'm having a lot of trouble figuring this out.

I want to compile that file because I want to include Axios, but not Vue since I haven't learned yet. And I don't know how to do it at all. If I require the new bootstrap Js, it somehow is telling me that tooltips can't be started at all. I'm so confused :/

Love it. Thank you!!

Thanks @w1n78 ! Buy the way, there was no "bootstrap" in package.json file. I added and it worked well.

For pagination

 php artisan vendor:publish --tag=laravel-pagination

$items->render('vendor.pagination.bootstrap-4')

I found the accepted answer to be not quite right. It's actually a little bit simpler.

To solve the rem/px build fail that @SalvoMulas mentioned, either, comment out @import "variables"; in resources/assets/sass/app.scss, or change any px values in your _variables.scss to rem. The standard $font-size-base of 14px converts to 0.875rem.

Editing webpack.mix.js is also unnecessary, because resources/assets/js/app.js requires resources/assets/js/bootstrap.js, which requires jQuery and Bootstrap. Including them in webpack.mix.js is redundant. This is what causes the issue that @rawrkats was having.

All that needs to be done is:

• In package.json, replace "bootstrap-sass": "^3.3.7", with "bootstrap": "4.0.0-alpha.6",
• In resources/assets/sass/app.scss, change the path of bootstrap to @import "node_modules/bootstrap/scss/bootstrap.scss";, and either comment out/remove @import "variables";, or change any px values in _variables.scss to rem
• In resources/assets/js/bootstrap.js, replace require('bootsrap-sass'); with require('bootstrap');

https://github.com/JeffreyWay/laravel-mix/issues/440#issuecomment-286465595

I'm about to start a new project? Should I go for BS4 or should I stick with BS3?

@jonecir , bootstrap 4 looks like it will be in beta any day now. Milestone for beta version is at 99% with @mdo saying it's just days away. I've used alpha v6 on a couple of projects, but those projects were simple, and I knew that I'd need to upgrade as bootstrap 4 evolves. It works great even as alpha v6. If your project is small and you don't mind going back and fixing things later, I say use it. If your project is larger, you may find it a lot of work to go back and fix things.

@jonecir Depends on what browsers your visitors are using, as Bootstrap embraces modern CSS features like Flexbox. You can check the supported browsers for version 4 here: https://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#supported-browsers

As for installing Bootstrap 4, the process would be this:

1. Run npm uninstall bootstrap-sass --save-dev and then npm install [email protected] --save-dev

2. Remove resources/assets/sass/_variables.scss and create a resources/assets/sass/_custom.scss

3. Amend resources/assets/sass/app.scss:

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

1. Amend resources/assets/js/bootstrap.js:

try {
    window.$ = window.jQuery = require('jquery');

    window.Tether = require('tether');

    require('bootstrap');
} catch (e) {}

You should be able to run npm run dev, which will re-compile your CSS and JavaScript with Bootstrap 4.

Variable overrides should go in _custom.scss, which is what the documentation recommends: https://v4-alpha.getbootstrap.com/getting-started/options/#customizing-variables

@SalvoMulas Thanks!

Just cleared the /resources/assets/sass/_variables.scss and it worked fine.

Using this discussion I came up with these procedures to use Bootstrap 4.0.0 beta with Laravel 5.5.

Hello, I made a Basic Bootstrap 4 (Beta) template for Laravel 5.5 (5.4) with authentication. You can download it here and find installation explanation as well. That should make things easier (at least I hope). Any comments, corrections and questions are very welcome! Thanks for all the comments above that helped me creating it. Regards.