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:
Start Bootstrap
Bootstrap Themes
Creative Tim

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 
cd admin_template

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:

root "welcome#index"

Then, we have to create the controller, so get this into app/controllers/welcome_controller.rb:

class WelcomeController < ApplicationController 
def index; end 
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

Now we have to copy all scss, js, and image files into our rails project, every file and folder from the scss theme folder will go into app/assets/stylesheets. After that, we have to do the same with the js theme folder, but pasting it into app/javascript. Finally, all folders from the img theme folder must be copied and pasted into app/assets/images.

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"; 

// Bootstrap 
@import 'bootstrap/scss/bootstrap';
 
// Theme mixins 
@import "2-mixins/button"; 

// Theme components 
@import "3-components/avatar"; 
@import "3-components/buttons"; 
@import "3-components/card"; 
@import "3-components/chart"; 
@import "3-components/content"; 
@import "3-components/dropdown"; 
@import "3-components/feather"; 
@import "3-components/footer"; 
@import "3-components/hamburger"; 
@import "3-components/list-group"; 
@import "3-components/main"; 
@import "3-components/navbar"; 
@import "3-components/reboot"; 
@import "3-components/sidebar"; 
@import "3-components/sizing"; 
@import "3-components/stat"; 
@import "3-components/tables"; 
@import "3-components/type"; 
@import "3-components/wrapper"; 

// Theme utilities 
@import "4-utilities/cursors"; 

// 3rd party plugins 
@import "jsvectormap/src/scss/jsvectormap"; 
@import "simplebar/src/simplebar"; 
@import "flatpickr/dist/flatpickr"; 

// 3rd party plugin styles 
@import "5-vendor/flatpickr"; 
@import "5-vendor/simplebar";

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:

<!DOCTYPE html> 
<html> 
<!DOCTYPE html> 
<html> 
 <head> 
 <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" %> 
 <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %> 

 <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"> 
</head> 

<body> 
 <%= yield %> 
</body> 
</html>

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 feather-icons@4.28.0
yarn add chart.js@2.9.4
yarn add flatpickr@4.6.9
yarn add simplebar@5.3.6
yarn add jsvectormap@1.3.3

Now all imports from the app.js file must be moved from the theme into app/javascript/application.js. Our applicatiion.js should have this brand new look:

// Entry point for the build script in your package.json 
import "@hotwired/turbo-rails" 
import "./controllers" 

import * as bootstrap from "bootstrap" 

import "./modules/sidebar" 
import "./modules/theme" 
import "./modules/feather" 

// Charts 
import "./modules/chartjs" 

// Forms 
import "./modules/flatpickr" 

// Maps 
import "./modules/vector-maps"

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à!

Now we’re empowered to import other views into our rails project. A little advice: if you go to views/welcome/index.html.erb and check the end of the file, you’ll see some scripts. It would be better if you move them into the javascript folder.

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.

Originally published at https://eagerworks.com.