Using Bootstrap CSS & JS ======================== Want to use Bootstrap (or something similar) in your project? No problem! First, install it. To be able to customize things further, we'll install ``bootstrap``: .. code-block:: terminal $ yarn add bootstrap --dev 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: .. code-block:: scss // 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! .. tip:: If you don't need *all* of Bootstrap's features, you can include specific files in the ``bootstrap`` directory instead - e.g. ``~bootstrap/scss/alert``. Importing Bootstrap JavaScript ------------------------------ Bootstrap JavaScript requires jQuery and Popper.js, so make sure you have this installed: .. code-block:: terminal $ yarn add jquery popper.js --dev Now, require bootstrap from any of your JavaScript files: .. code-block:: javascript // app.js const $ = require('jquery'); // this "modifies" the jquery module: adding behavior to it // the bootstrap module doesn't export/return anything 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(); }); Using other Bootstrap / jQuery Plugins -------------------------------------- If you need to use jQuery plugins that work well with jQuery, you may need to use Encore's :ref:`autoProvidejQuery() ` method so that these plugins know where to find jQuery. Then, you can include the needed JavaScript and CSS like normal: .. code-block:: javascript // ... // 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');