Latest Bootstrap 4.5.2 on Rails 6

Lost with using adding Bootstrap in Rails 6? Don’t worry this should get you on the right track FAST.

Webpack is a separate compiler from the previous Rails 4/5 sprockets compiler. Given Rails 6 using webpack compiles.. adding Bootstrap 4.5 to Rails 6 should be done/compiled via webpack

1. Add Bootstrap:

yarn add bootstrap jquery popper.js -D

This will add bootstrap jquery and popper in /node_modules folder as well as saving it to package.json

2. Update Webpack Config:

Update your config/webpack/environment.js:

const { environment } = require('@rails/webpacker')

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

module.exports = environment

This will add jquery and popper asa global variables.. which is required by bootstrap

3. Add Bootstrap to your SCSS file

Rename file: app/assets/stylesheets/application.css to .scss and add:

// you can overide bootstrap variables here above the bootstrap import

@import "bootstrap/scss/bootstrap";

Make sure you have this in your views/layouts/application.html head tag which will load the application.scss file:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

4. Adding Bootstrap Javascript

In this file app/javascript/packs/application.js add:

import "bootstrap/dist/js/bootstrap"
import "jquery/dist/jquery"
import "popper.js/dist/esm/popper"

5. Finally run:

rails assets:precompile

You have both the scss and js files loaded and you can extend with customizing/making your own custom bootstrap theme on rails 6.