Importing Bootstrap Styles

Now that bootstrap lives in your node_modules/ directory, you can import it from any Sass or JavaScript file. For example, if you already have a global.scss file, import it from there:

1
2
3
4
5
6
7

// assets/css/global.scss

// customize some Bootstrap variables
$primary: darken(#428bca, 20%);

// the ~ allows you to reference things in node_modules
@import "~bootstrap/scss/bootstrap";

That's it! This imports the node_modules/bootstrap/scss/bootstrap.scss file into global.scss. You can even customize the Bootstrap variables first!

Importing Bootstrap JavaScript

Bootstrap JavaScript requires jQuery and Popper.js, so make sure you have this installed:

1
2

$ yarn add jquery --dev
$ yarn add popper.js --dev

Next, make sure to call .autoProvidejQuery() in your webpack.config.js file:

1
2
3
4
5

// webpack.config.js
Encore
    // ...
+     .autoProvidejQuery()
;

This is needed because Bootstrap expects jQuery to be available as a global variable. Now, require bootstrap from any of your JavaScript files:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// app.js

const $ = require('jquery');
// JS is equivalent to the normal "bootstrap" package
// no need to set this to a variable, just require it
require('bootstrap');

// or you can include specific pieces
// require('bootstrap/js/dist/tooltip');
// require('bootstrap/js/dist/popover');

$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
});

Thanks to autoProvidejQuery(), you can require any other jQuery plugins in a similar way:

1
2
3
4
5
6
7

// ...

// require the JavaScript
require('bootstrap-star-rating');
// require 2 CSS files needed
require('bootstrap-star-rating/css/star-rating.css');
require('bootstrap-star-rating/themes/krajee-svg/theme.css');