Add Bootstrap and FontAwesome to your Ruby on Rails 6 application

Bootstrap

We will use yarn to add Bootstrap and it's dependencies - jquery and popper.js

Make sure you have yarn installed then run the following command on the terminal in the root directory
yarn add bootstrap@4.3.1 jquery popper.js

We can check that the libraries have been installed successfully by checking the package.json file.

Now let's replace the config/webpack/environment.js code with the following:

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

We added this code so the application's javascript understands jquery and popper.js syntax.

Now we have to import bootstrap and to do that we will go to app/javascript/packs/application.js and add the following line:

import "bootstrap" 

And That's it for javascript.

Now the CSS
Let's Go to app/assets/stylesheets/application.css and add the following above the require_tree and require_self lines:

*= require bootstrap

So it would be like this

Now let's add some custom styles to the app styling, so we will create a new file (app/assets/stylesheets/custom.css.scss).

Here we import the bootstrap library first so we are able to modify styles for not just the new classes but existing bootstrap classes as well:

@import 'bootstrap/dist/css/bootstrap';

That's it! now we are good to go with bootstrap 4 in your Rails 6 application.

FontAwesome

Make sure you have yarn installed then run the following command on the terminal in the root directory
yarn add @fortawesome/fontawesome-free

We can check that the successful installation by checking the package.json file.

Now we have to import font awesome and to do that we will go to app/javascript/packs/application.js and add the following lines, the js to make sure it works on production as well as development:

import "@fortawesome/fontawesome-free/js/all";
import "@fortawesome/fontawesome-free/css/all";

That's it for FontAeswome!

Now we have added bootstrap and font awesome successfully to our rails application.

Happy Coding!