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.
The following software versions were used in this post.
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.