Kelvin Liang

IT Pro, Web Dev

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

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.



December 9th, 2019

In the ~ Move sass to webpack section, the folder path should be app/javascript/stylesheets/ instead of app/javascript/packs/stylesheets/

Keep up the good work :call_me_hand:t2:

December 9th, 2019

Thanks for the feedback, updated!

December 17th, 2019

Hi Kelvin,

Thanks for writing this article! I appreciated the step-by-step instructions. It helped me set up bootstrap and font-awesome-5 in Rails 6.

I think there is a small typo in this line “First, create following folder app/javascript/packs/stylesheets/”. I think you mean “app/javascript/stylesheets”.

I look forward to reading more of your writings! If you know an easy way to develop in dark mode, it’d be great to see a tutorial on that.


December 18th, 2019

Thanks, @nancy-trinh, glad you like it.
I did notice the typo from last comment here, and I tried to update it from the back-end, but it seems @hackernoon wouldn’t update automatically from the front-end. it might be a bug or something, hope @hackernoon team can fix it ASAP.

December 18th, 2019

I also post this article in Medium (they do have better editting platform and publishing flow, sorry, @hackernoon), you can check it out here.

More by Kelvin Liang

Topics of interest