Bootstrap Guide: Integrating into Ruby on Rails

Discover in our tutorial how to seamlessly integrate Bootstrap into your Ruby on Rails application to achieve an attractive and user-friendly web design. From installing the necessary dependencies to customizing layouts and styles, follow our guide to reduce development time and enhance your application’s appearance.

When developing a Ruby on Rails application, you may want to add styles to facilitate user interaction. One way to do this is by adding Bootstrap, an HTML, CSS, and JavaScript framework designed to simplify the process of building responsive, mobile-ready web projects. By implementing it in a Rails project, you can incorporate its layout conventions and components into your application, making the user interaction on your website more engaging.

Step 1: Clone Project and Install Dependencies

Our first step is to clone the rails-stimulus repository from GitHub and install the dependencies. Execute the following commands:

git clone https://github.com/do-community/rails-stimulus.git rails-bootstrap

cd rails-bootstrap

bundle install

yarn install –check-files

rails db:migrate

rails s

Step 2: Add Main Landing Page and Controller

Currently, the root view is set to the main sharks page. To change the controller’s main page, follow these steps:

rails generate controller home index

nano config/routes.rb

In the `routes.rb` file, change:

root ‘sharks#index’

to

root ‘home#index’

Step 3: Install Bootstrap and Add Custom Styles

In this step, you’ll add Bootstrap to your project and create custom styles. Run the following commands:

yarn add bootstrap jquery popper.js

nano config/webpack/environment.js

In the `environment.js` file, add the following code:

const webpack = require(“webpack”);

environment.plugins.append(“Provide”, new webpack.ProvidePlugin({

$: ‘jquery’,

jQuery: ‘jquery’,

Popper: [‘popper.js’, ‘default’]

}));

Step 4: Customize Application Layout

Add Bootstrap conventions and components to the main application layout to enhance its visual appearance. Open the `app/views/layouts/application.html.erb` file and add the following code:

“>

<%= csrf_meta_tags %>

<%= csp_meta_tag %>

<%= stylesheet_link_tag ‘application’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’ %>

<%= javascript_pack_tag ‘application’, ‘data-turbolinks-track’: ‘reload’ %>
<%= render ‘layouts/navigation’ %>


<%= content_for?(:content) ? yield(:content) : yield %>

Step 5: Create Shared Partials and Specific Layouts

Create shared partials, specific layouts, and a display for the application’s home page. Also, add Bootstrap styles to your current link_to elements. Follow these steps:

nano app/views/layouts/_navigation.html.erb

nano app/views/layouts/sharks.html.erb

nano app/views/home/index.html.erb

nano app/views/sharks/index.html.erb

nano app/views/sharks/new.html.erb

nano app/views/sharks/edit.html.erb

nano app/views/sharks/show.html.erb

Add the appropriate Bootstrap classes to the HTML files as described in the tutorial.

Bootstrap Conclusion

Congratulations! You have now successfully integrated Bootstrap into your Rails application. By following this tutorial, you can improve the user experience of your application and make it more visually appealing. For more information on Bootstrap, see the official documentation. Guide: Integrating Bootstrap into Ruby on Rails