Installing Bootstrap to a Rails Project

One challenge when creating an application with Ruby on Rails is design. Just so we understand, Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first, and front-end web development. Bootstrap contains CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. Sounds easy!

But how do we install it within a Rails Project? We can do this in several ways, such as adding bootstrap within our Gemfile. But there is another way by not adding it to our Gemfile.

Rails 6

Rails 6 uses the webpacker gem packs and combines all of your JavaScript files into one in order to make your application more efficient. We will be installing bootstrap by yarn, because webpacker uses yarn and yarn also allows us to add various different javascript libraries. So within your root directory in your terminal we will add bootstrap, jquery, and popper:

yarn add bootstrap jquery popper.js

By running the above code, yarn should grab the 3 packages and install them within your Rails app. These would be installed as dependencies and saved within your lockfile.

Next, go into config/webpack/enviroment.js

This file tells our application what javascript modules to use in the entire environment. In order for use to use that we have to add in a couple of lines of code below:

Then, go to app/javascript/packs/application.js

This file is automatically created when creating a new rails project. Instead of requiring jquery within this file, we have already done that within the environment.js. The only thing we would have to do within the application.js file is import bootstrap framework.

Next, go to app/assets/stylesheets/application.css

First thing we have to do with this file is rename it to be application.scss. Within the file we have to import ‘bootstrap’, and since we have used yarn to install the directory is different. We would also have to add the scss files that we would have to import bootstrap to. So I also have to import the rest of the stylesheets within my application.scss. For example within my app/assets/stylesheets i have my application.scss and I have a courses.scss, i only have to import the file within my application.scss. Our code within the application.scss should look similar to the one below:

Lastly, test it out! You always want to make sure you test. Grab some bootstrap code and put it in your views and open your localhost and see the difference.