How to use bootstrap with Rails6

I’m unfortunately not a person that pays too much attention or has that much interest in website styling. The actual functional elements are the part that interests me most.

That being said UI is extremely important and frameworks like bootstrap make it easy for “form follows function” people like myself to get some decent styling up and running without taking up too much time.

First, you need to install bootstrap by running:

yarn add bootstrap@4.3.1 jquery popper.js

After that finishes, head over to your config/environment.js file and add this in between the first and last lines in the file:

const webpack = require(“webpack”)

environment.plugins.append(“Provide”, new webpack.ProvidePlugin({

$: ‘jquery’,

jQuery: ‘jquery’,

Popper: [‘popper.js’, ‘default’]

}))

Then, head over to your css in app/assets/stylesheets/application.css and add this:

*= require bootstrap

right above

*= require_tree .

*= require_self

For the ability to add custom styling to your bootstrap templates, add this file to your app/assets/stylesheets/ directory:

custom.css.scss

here you can add standard css.

Good Luck!