How to bundle Twitter Bootstrap with Laravel Mix

Getting Bootstrap to work with a module bundler is a nightmare.

I’ve tried a hundred times, but I always end up debugging some of Bootstraps requirements before getting it to work.

This short guide will probably help me many times in the future, and hopefully you’ll get something out of it too.

Install required modules

npm install bootstrap
npm install jquery
npm install tether

Configure your webpack.mix.js file

mix.autoload does all the work for us here. Exposing jQuery and Tether in the window-scope.

// webpack.mix.js

const { mix } = require('laravel-mix');

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

mix.sass('resources/assets/sass/app.scss', 'public/css');
mix.js('resources/assets/js/app.js', 'public/js');

Require / Import bootstrap in your main JS-file

We’re using ES6 syntax here, but you can use require() if you want.

// app.js

import '../../../node_modules/bootstrap/dist/js/bootstrap';

Ready, set, go

Now you’re ready to compile your assets

npm run dev