Explore a step-by-step guide on integrating a Bootstrap theme into Rails 7
Looking to implement a prototype or a Minimum Viable Product (MVP) at your startup fast? You’re on the right step-by-step guide then. Through these paragraphs, we will prove how using a theme or a template to start your project can help you reduce your development effort.
We strongly recommend this option because it eases the process and reduces time-to-development. There are many theme and template options that can be used for any industry and that can perfectly meet your needs. Here’s a list of just three platforms where you can find the right template for you:
At Eagerworks, we’re used to choosing bootstrap for our own rails projects. Therefore, for this tutorial, we’re going to focus on those templates that use this library─yes, we only recommend what we truly use, this guide is eagerworks-tested. We had a hard time selecting the theme ─because there are plenty of pretty good examples to try─but after a while, we’ve decided to go with this open-source theme: AdminKit.
Before we get started, some easy-peasy things you’ll need to count on
There aren’t a lot of requisites to start this step-by-step guide. You just need to check out that you have ruby 3 and bundler installed. And, for sure, an npm above version 7. Done? Then we are good to jump into our tutorial.
Step-by-step (for real)
We are going to explain each step, command, and code we’ve used to integrate a bootstrap theme in rails 7. This means we’re going to go through all the way together.
Step 1: Creating the project
To create a new rails project with bootstrap, please run the following commands:
gem install jsbundling-rails
rails new admin_template --css=bootstrap
Step 2: A warm welcome
Once we’re done with creating the rails project, it’s time to build some space to create the root route and welcome controller. We just simply have to add this line into config/routes.rb:
Then, we have to create the controller, so get this into app/controllers/welcome_controller.rb:
class WelcomeController < ApplicationController
def index; end
Now we have to create an empty file for the welcome index view into app/views/welcome/index.html.rb.
Step 3: Getting the dashboard html into our rails project
Here we have to copy the dashboard html into the rails project, which means copying the theme file static/index.html and then pasting it into app/views/welcome/index.html.erb.
Now we have the chance to run our server and verify that the html is working─we should be able to see it. Remember that we don’t have any styles yet.
Step 4: Time to train our copy-paste ability
Step 5: The double M: moving and modifying
To continue, we have to move content from app/assets/stylesheets/application.bootstrap.scss and modify some of the imports in order to use the libraries that we’ve already installed. A little help: our /application.bootstrap.scss should look like this:
// Variables @import "1-variables/app";
// Theme mixins
// Theme components
// Theme utilities
// 3rd party plugins
// 3rd party plugin styles
Pay special attention to bootstrap, bootstrap, jsvectormap, simplebar, and flatpickr imports. See how we have changed them?
Step 6: We say goodbye to <head> and <body>
Now it’s key that we erase <head> and <body> html tags from app/views/welcome/index.html.erb and that we move important head content to app/views/layouts/application.html.er. Here’s how the layout should look like:
<title>AdminKit Demo - Bootstrap 5 Admin Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
<%= yield %>
Step 7: We say hello to must-have js libraries
To install all the js libraries needed by using yarn, we have to run these commands:
yarn add firstname.lastname@example.org
yarn add email@example.com
yarn add firstname.lastname@example.org
yarn add email@example.com
yarn add firstname.lastname@example.org
// Entry point for the build script in your package.json
import * as bootstrap from "bootstrap"
Step 8: Some last-minute replacements
It’s key that we use `image_tag` instead of img html tags, so, we must replace all img html tags in our app/views/welcome/index.html.erb file for something like this:
Step 9: Voilà!
One last recommendation is to move the sidebar, navbar, and footer to partials, to reuse them.
See? In less than ten steps, you can now enjoy all the pre-designed views and components to implement your MVP faster than ever while keeping its good appearance. Want to get some more guides? Explore our blog.