Add Bootstrap 5 to a Rails 6 App
Published: 19th of December 2020
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 - 18.104.22.168
- 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 firstname.lastname@example.org
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. */
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.