[Rails] Setup Bootstrap via Webpacker

November 15, 2020

Introduction

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Definition from Bootstrap website.

With Boring Generator

Boring Generator installation guide.

> rails generate boring:bootstrap:install

OPTIONS:
  No options available.

Without Boring Generator

1. Add Bootstrap via NPM packages

yarn add bootstrap jquery popper.js

2. Configure jQuery and popper.js plugin with webpack

// config/webpack/environment.js

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment

3. Import Bootstrap Stylesheets

// app/javascript/stylesheets/application.scss

@import "~bootstrap/scss/bootstrap";

4. Require Bootstrap

Require the stylesheet in the application.js to be available in the entire application. Rails 6 by default adds the javascript_pack_tag in the application.html.erb to apply all the JS via webpack on the entire application. Please make sure you have javascript_pack_tag added in your application layout.

// app/javascript/packs/application.js

import "bootstrap"
import "stylesheets/application"

5. Include stylesheet pack tag

// app/views/layouts/application.html.erb

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Happy Coding!!!