Bootstrap Install Guide for Rails 6 Applications

Bootstrap markets itself as the most popular HTML, CSS, and JavaScript framework for developing highly responsive, mobile first web applications. The sleek, intuitive, and powerful framework currently ranks as the tenth most popular GitHub repository with over 148,000 stars, more than 1000 contributors, and over 20,000 commits. It is compatible with a variety of frameworks (ex. Django, Express, Rails, etc).

This tutorial will walk you through adding Bootstrap functionality to a Rails application using two popular delivery methods. The framework has two dependencies — CSS and JavaScript and requires jQuery and Popper.js. Installation of these will also be covered.

Install Bootstrap via Content Delivery Network (CDN)

Photo Credit: Adobe Stock Photo

Probably the easiest way to incorporate Bootstrap in a Rails application is through a Content Delivery Network (CDN). If you elect to use this route, you don’t have to download Bootstrap. All functionality is delivered via cached versions of Bootstrap’s compiled CSS and JSS libraries from CDN links embedded in your HTML code. This can be beneficial relative to hosting libraries on your application server and so long as you can an internet connection, the CDN links will pull whatever is needed for your application.

Popular Bootstrap CDNs include Stackpath (formally MaxCDN) that powers over 8 million websites globally and jsDelivr — a free open source CDN prominently featured on Bootstrap website.

Benefits of using CDNs:

  • Bootstrap’s compiled CSS and JSS libraries can be pulled from a CDN server closest to the user who is trying to load your website effectively offloading the bandwidth strain on your application’s server while simultaneously providing significantly faster load times for that user.
  • There is also the potential for bandwidth cost reductions as a result of a significant percentage of website traffic potentially already possessing cached bootstrap files in their local browser.
  • CDNs offer extra defense against DDoS attacks due to the very nature of how a CDN operates and redistributes traffic when needed.

To install Bootstrap via Stack’s CDN, simply add the following code to the <head> tag of your HTML file.

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity=”sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z” crossorigin=”anonymous”>

Then add the following code for jQuery, Popper.js, and Bootstrap’s Javascript before the end of your <body>. Alternatively you can download and install JQuery and Popper.js instead of using their CDN versions.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Install Local Copy To Your Rails Application

Simply put, CDNs fail but your scripts don’t have to. There are benefits of a local install over reliance on a Content Delivery Network. For the savvy developer, utilizing a CDN for performance gains but ensuring a seamless fallback to a local copy in the event of a CDN failure is a smart move.

In Rails 6, CSS stylesheets are located in the assets folder inside the app directory. By default they are part of the assets pipeline and managed by sprockets but you can change this to make them available to the JavaScript folder.

JavaScript has a dedicated folder in Rails 6 and is handled by an open-source JavaScript module bundler called webpack. The webpacker gem is what rails uses to make webpack work in a Rails application. In earlier versions of Rails, JavaScript was handled by the assets pipeline and managed by sprockets.

The application.html.erb file is the main layout file for Rails and all views created are served through the yield line in the body of that file. By default, whatever is in the head of the main layout file will also be available to those views. This means whatever JavaScript and CSS styling created will be available to those views due to the stylesheet_link_tag and javascript_pack_tag in the header of the main layout file.

The application.html.erb file is the main layout file for Rails with all views served through the yield line
Directory paths for the application.css and application.js files in your Rails 6 application

Bootstrap can only be installed in the rails application folder instead of a system-wide installation which means you have to reinstall the framework each time you create a new rails application.

To get started, run the following command in your terminal from your rails application directory:

yarn add bootstrap jquery popper.js

With Bootstrap added to your rails application, you can confirm proper installation of the libraries by checking the package.json file in your root application directory for the following files:

Check the package.json file located in the root directory of your rails application for proper installation

Next, add the following bolded code to your config/webpack/environment.js file and structure the file to look like below:

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

This code is added to ensure your rails JavaScript understands jQuery and Popper.js syntax. Next, navigate to your app/javascript/packs/application.js file and add the following to the bottom of the file:

import “bootstrap”

In the app/assets/stylesheets/application.css file, add the following code above *=require_tree and *=require _self lines.

*= require bootstrap

Lastly, create a new file in the app/assets/stylesheets folder. You can name it whatever you want but ensure it has the extension .css.scss and add the following to the file. This code imports the bootstrap CSS library into your rails application and allows for style modifications of both custom classes and bootstrap classes.

@import ‘bootstrap/dist/css/bootstrap’;

And that’s it!

Bootstrap is now installed locally in your rails applications and the associated CSS and JS libraries are available for use. Information on incorporating CDN links with a local fallback can be found here.

It’s hip to b[e= mc²] → 7.819 x 10¹⁸ Joules

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store