From Rails 5 to Bootstrap 4 — Responsive Admin Dashboard Template

Stack Rails Admin Theme (PRO Version)

This guide will get you started with both Rails 5 and Bootstrap 4 as well as will dive in some bootstrap 4 theming and finally will deploy and cover some of the quickest ways to get a Rails 5 App running on Heroku.

1. Setup a new Rails 5 Application
2. Include Bootstrap 4
3. Add a custom Bootstrap 4 Theme
4. Create a Dashboard Fluid Layout

1. Setup a new Rails 5 Application

We start our rails theme development with running the following command:

$ rails new stack

Once the Rails 5 scaffold has been finished we start the server by running:

$ rails s

That’s it you now have a running rails 5 fresh boilerplate setup.. go to your browser and type http://localhost:3000/ you should see:

rails 5 new app

2. Include Bootstrap 4

To include Front-End (not Gems) dependencies like Bootstrap/jQuery through NPM we need to do the following:

Install bootstrap through npm:

$ npm install bootstrap -D

This will install bootstrap in the node_modules folder. For our Rails app to pick it up we need to:

1. setup a new route for our index page and create controller + view for it
2. include the bootstrap dependency

So starting with Step 1 we need to add to our config/routes.rb file:

$ root :to => "pages#index"

Then create your empty pages_controller.rb in app/controllers/ folder:

class PagesController < ApplicationController
end

Then to to add the view file you need to create the folder /pages within app/views and within your app/views/pages you need to create index.html.erb:

<div class="container">
  <h1>Welcome to Bootstrap 4</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et,  
     distinctio perspiciatis, fuga minus facilis ea quae qui laborum 
     cupiditate accusamus.
  </p>
  <button class="btn btn-primary">Button</button>
</div>

Now you’re done adding your route, controller and view we need to rename our app/assets/stylesheets/application.css to application.scss and include bootstrap.

We will have app/assets/stylesheets/application.scss with the following content:

@import "bootstrap/scss/bootstrap";

That’s it we’ve now included bootstrap 4 into our new Rails 5 app.

3. Add a custom Bootstrap 4 Theme

Continuing with our Admin Dashboard rails application we will include the barebones of a Stack Rails Base (FREE).

For the custom theme we require the following dependencies both for bootstrap and layout. Our package.json file will look like this:

{
  "name": "stack",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "bootstrap": "^4.1.3",
    "dom-factory": "1.0.0",
    "jquery": "^3.3.1",
    "material-design-icons-iconfont": "^3.0.3",
    "material-design-kit": "^1.0.0-alpha.24",
    "popper.js": "^1.12.5",
    "sidebar-style-guide": "^2.0.0",
    "simplebar": "^3.1.1"
  }
}

Then run “npm install” in your terminal to install those dependencies and get them available through node_modules.

Update your app/assets/stylesheets/ sass files with the layout & theme specific styling:

frontted/stack-rails-base

4. Create a Dashboard Fluid Layout

We need to setup the layout with navbar & sidebar content specific to the material-design-kit layout samples.

Update your views files from app/views/layouts/ with:

frontted/stack-rails-base

In our javascript file we need to require all dependencies to make bootstrap work as well as the dependencies for our layout and initialize it.

Update your app/assets/javascripts/application.js file content with:

//= require jquery/dist/jquery.min.js
//= require popper.js/dist/umd/popper.js
//= require bootstrap/dist/js/bootstrap.min.js
//= require simplebar/dist/simplebar.min.js
//= require dom-factory/dist/dom-factory.js
//= require material-design-kit/dist/material-design-kit.js
// Self Initialize DOM Factory Components
domFactory.handler.autoInit()
// Connect button(s) to drawer(s)
var sidebarToggle = Array.prototype.slice.call(document.querySelectorAll('[data-toggle="sidebar"]'))
sidebarToggle.forEach(function (toggle) {
  toggle.addEventListener('click', function (e) {
    var selector = e.currentTarget.getAttribute('data-target') || '#default-drawer'
    var drawer = document.querySelector(selector)
    if (drawer) {
      drawer.mdkDrawer.toggle()
    }
  })
})

You can download the source code from:
https://github.com/frontted/stack-rails-base

Stack Rails — Rails Admin Dashboard Theme

https://railsthemes.com/stack-admin-theme

Stack Rails — Admin Dashboard Theme