Integrate Bootstrap 4 and Font Awesome 5 in Rails 6 [A How To Guide]

Author profile picture

@Kelvin9877Kelvin Liang

IT Pro, Web Dev

Rails 6 is out for few months now, I happen needed to do a project with it. But I found I can't use the same way to integrate Bootstrap 4 & Font Awesome 5 in Rails 5 in my new project. Because in Rails 6, it start to use "webpack" as default Javascript complier.
I try to "Google" it, but nothing valid come back. I did try with some instructions from medium or Stack Overflow, none of them are working.
After some trials and errors, I finally find a way to make them work together, let me share it in here, hope it can help you!

So what is changed?

First, Javascripts is move from
Second, the path refer Javascripts in
have change from
PS: behind the scene, it is because in Rails 6, they start to use webpack as default javascript compile engine.

What I should do ?

~ Add bootstrap into rails ?
First, integrate Bootstrap (Base on Bootstrap docs) use rails' way.
Add following line in to your
# Gemfile
gem 'bootstrap',  '~>4.3.1'
after save, run
bundle install
to update the gem library.
At this point, you might find your web page font has been changed and maybe some bootstrap class is working.
However, if you want all functionalities work in bootstrap 4, you might need to integrate jquery, and popper.js. But here is what not working by referring the docs from bootstrap.
Beside, by default, Rails is still use the
, which is not utilize the power of webpack.
So if you want to integrate Sass with webpack as well, you can follow steps below. Otherwise, you can skip them and move on to next section.
~ Move sass to webpack
First, create following folder
, create
file under this folder and insert following line.
// app/javascript/stylesheets/application.scss

@import "bootstrap";
Second, change the reference link in
file from
<%# app/views/layouts/application.html.erb %>

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
But the sass wouldn't work just yet, let's move on next part.
~ Use yarn add bootstrap, jquery, popper.js.
It is recommended by most the sources I can found, so I think it is better follow their advices now. run following line in your terminal.
yarn add bootstrap jquery popper.js
After yarn install the packages correctly, update config file of webpack as following.
// config/webpack/environment.js
const { environment } = require("@rails/webpacker");
const webpack = require("webpack");
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
Popper: ["popper.js", "default"]
module.exports = environment;
Next,  update your
file by adding following lines.
// app/javascript/packs/application.js

import "bootstrap";
import "../stylesheets/application";
After updating, the
folder structure should something like following.
By now, bootstrap 4 should be fully integrated, test it out with your project.
~ Final touch for Bootstrap
There are some components require adding custom javascript code into your project, such as tooltip, modal or popovers. So the best way add those code in
(or any name your want) file, and import it into
, such as following:
$(function() {

$(function() {
import "./custom";
Finally, refresh the page or restart the Rails server if you can't see the changes.
Now let's move on to Integrate Font Awesome 5 (there are actually gem for it, such as this, or this, but they are either still use Font Awesome 4 or it is not working by following their docs).
First, use yarn add latest Font Awesome library into your project.
yarn add @fortawesome/fontawesome-free 
Second, add following line in both
// app/javascript/stylesheets/application.scss

@import '@fortawesome/fontawesome-free';
// app/javascript/packs/application.js

import "@fortawesome/fontawesome-free/js/all";
So by now, Font Awesome 5 should be integrated into your project, you can integrate the icon by inserting code like following:
<i class="fab fa-facebook-f fa-3x mx-2"></i>
One more thing ...
if you want to integrate Font Awesome into your rails erb code, you might still need add following gem into your project.
# Gemfile

gem 'font_awesome5_rails'
So now you can start using ruby code like following to decorate your web page.
<%= fa_icon "baby", text: "BB", class: 'mx-2', size: '3x' %>
Now you are done.

Final words ...

Due to I still fresh in the web development world, there might be better way to do it, please do let me know, thanks!
As you can see, you need to both install gem and javascript package to make them works, I hope later gems package can fix this to make our life easier.
You can reference my sample HTML code here.


The Noonification banner

Subscribe to get your daily round-up of top tech stories!