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.


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


The following software versions were used in this post.

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


Add the popper.js and bootstrap packages through yarn.


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.


<%# 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.


<%# 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.


/* 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.


// 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.


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


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



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

rails bootstrap