Add Bootstrap 4 to your Ruby on Rails 6 application

Step 1: Using Yarn:

yarn add bootstrap@4.3.1 jquery popper.js

package.json file should look like this

"dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },

Step 2: Head to config/webpack/environment.js file and add these lines

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

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

Step 3 : Head to app/assets/stylesheets/application.css and add these lines

*= require bootstrap

*= require_tree .

*= require_self

Congratulation! You have successfully installed Bootstrap 4 😀

Comments

[Natarajan Mahalingam]

Just a little addition to the steps. You also need to add

import "bootstrap"

to app/javascript/packs/application.js

[Sevicode]

The last part result in an error. You sure is the format correct?

[Alex Rosenfeld]

The top of app/assets/stylesheets/application.css should look like this:

/*
  *= require bootstrap
  *= require_tree .
  *= require_self
*/