Installing Bootstrap on Rails Project
Ensuring a responsive design is crucial, as approximately 90% of users access websites via their smartphones. Equally important is giving our applications a purposeful and visually appealing design. Bootstrap, a powerful library, comes to the rescue by enabling us to create compelling application layouts while ensuring responsiveness. Below is a step-by-step guide on how to integrate Bootstrap into your Ruby on Rails application.
Installing the Bootstrap Gem
After creating your Ruby on Rails application, it’s essential to include the following code in your Gemfile:
gem 'bootstrap'
gem 'jquery-rails'The ‘bootstrap’ gem will provide the necessary styles for creating responsive layouts, while ‘jquery-rails’ simplifies the integration of the jQuery JavaScript library, which Bootstrap relies on. To install these gems, run bundle install, and proceed to the next step.
Import Bootstrap Styles and JavaScript
In Rails 6 or later, Bootstrap recommends using the @import directive within the app/assets/stylesheets/application.css file. This file can have either a .css or .css.scss extension. Ensure you have the following line of code at the top of the file:
@import "bootstrap" Moving to app/javascript/packs/application.js, confirm that these two lines are included:
require("bootstrap")
require("jquery")Include Bootstrap’s JavaScript and CSS in Your Layout
In your Rails layout file, typically located at app/views/layouts/application.html.erb, include Bootstrap's JavaScript and CSS files by adding these lines within the <head> tag:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>Don’t forget to restart your server to ensure that the changes take effect
With these steps, you’ve successfully integrated Bootstrap into your Ruby on Rails project, allowing you to utilize its powerful design capabilities and ensure a responsive user experience.
