Add Bootstrap 5 to a Rails 6 App

published: 19th of December 2020

Intro

In this post I will show you how to add the Bootstrap CSS framework to your Rails 6 application.

Bootstrap is a solid CSS framework that allows us to make our app look really nice and work across a multitude of device types and browsers without having to get bogged down in the details.

Note

This post assumes that you already have Rails 6 installed and ready to go.

Software

The following software versions were used in this post.

Rails - 6.0.3.4
Popper.js - core/2.5.4
Bootstrap - 5.0.0-beta1

Installation

Add the popper.js and bootstrap packages through yarn.

    cmd
  
    yarn add @popperjs/core@^2.5.4
yarn add bootstrap@5.0.0-beta1

Add the stylesheet_pack_tag tag to the views/layouts/application.html.erb file in the <head></head> section.

    file
  
    <%# views/layouts/application.html.erb %>

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

Also, remove the stylesheet_link_tag tag from the same views/layouts/application.html.erb file.

    file
  
    <%# views/layouts/application.html.erb %>

<%# Delete me %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

In the app/assets/stylesheets/application.css file add the following contents.

    file
  
    /* app/assets/stylesheets/application.css */

/* import the bootstrap library */
@import "bootstrap"

/* import other css files below. */

In the app/javascript/packs/application.js file, add the following contents at the end.

    file
  
    // app/javascript/packs/application.js

// import the bootsrap library.
import "bootstrap;"

// import the app/assets/stylesheets/application.css 
// file from the previous step.
import "../../assets/stylesheets/application;"

Now restart your server and fingers crossed you should be good to go.

Usage

For detailed usage, check the docs. But as an example, to add a nicely styled button, add the bootstrap CSS classes to the tag.

    file
  
    <button type="button" class="btn btn-primary">Primary</button>

Outro

In this post we added Bootstrap 5 to our Rails 6 application. Behold the beauty of Bootstrap 5.