How to add bootstrap using gem in ruby on rails

What Will I Learn?

You will learn how to add bootstrap (world's most popular front-end component library) using the gem in ruby on rails
You will learn how to configure bootstrap gem into the ruby on rails project
You will learn how to add the navigation bar

Requirements

OS: Ubuntu/Mac OS
A text editor like sublime
Basic understanding about Ruby on Rails
And for better understanding must refer my previous tutorials (link added to the curriculum)

Difficulty

Intermediate

Tutorial Contents

Hello and welcome to the tutorial. In this tutorial, you will learn how to add bootstrap (which is the world's most popular front-end component library) in ruby on rails using bootstrap gem and add the navigation bar for quick access the links, so that the page looks good.

NOTE: Please follow my previous tutorials, so that you can better understand about the project, link added in the curriculum.

Open the project in the terminal and the text editor (sublime)

Now go to Gemfile from the text editor add the bootstrap gem into them and save it

gem 'bootstrap', '~> 4.0.0'

Make sure the version you are going to add is greater than 4.0.0

Now it's time to install this gem into the project for that goes to the project path in the terminal and paste the following command

bundle

You can also check this gem is installed or not by running the following command

bundle show

https://steemitimages.com/DQmbEW3hxubQwFNQWUFFLqBksyZVaagZUx2cTbRiVi8Esid/image.png

*You can see the highlighted part of the image showing the bootstrap is available in the project

Now run the server by the following command into the terminal

rails s

Open the browser and enter the localhost:3000 in the url. You can check the bootstrap is loaded or not by the following steps:

Right-click on the browser
Go to view page source and click

A new window will be opened and now check the bootstrap file is loaded or not, as seen in the below image

https://steemitimages.com/DQmdMQw2VCpKse2K9Drx164o18itRH4jxSh6ZCCpwmYAEAy/image.png

You can see that the bootstrap is not loaded because we haven't to configured into the app. Please follow the following steps to configure bootstrap into the app:

First step is to include bootsrap js. For that go to the app > javascript > application.js and add the following code into that

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .

*This will include all the necessary jquery and bootstrap js into the project

Next step is to include the bootstrap scss file. Go to the app > stylesheets and create a new file named application_bootstrap.scss and add the following code into that

 @import "bootstrap";

*This will import the bootstrap scss into the project

We have included the file but our project doesn't know this file is loaded or not. For that we have include following code into the config > initializers > assets.rb file

Rails.application.config.assets.precompile += %w( application_bootstrap.scss )

Now go to the application.html.erb and remove all code under header tag and paste the following code into it

<head>
  <title>RAILS DEMO</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => false %>
  <%= stylesheet_link_tag    'application_bootstrap', media: 'all' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
  <%= csrf_meta_tags %>
</head>

This will include the your assests folder like stylesheets, javascripts and also bootstrap file

Now reload your browser and inspect your page source again. You will now see bootstrap is loaded successfully.

https://steemitimages.com/DQmUuQmyMzPJWcUCiTE2iqWbzFdcFQddve2JUp5oMHEmfvd/image.png

The app is ready for bootsrap so let's add bootstrap navigation bar. Copy the following code and paste it into the body above yield at application.html.erb

    <nav class="site-navbar navbar navbar-inverse navbar-fixed-top navbar-mega f-w-400" role="navigation" style="background: #1FBF8F;">
      <div class="navbar-container container-fluid">
        <div class="navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
          <ul class=" nav navbar-toolbar" style="display: -webkit-inline-box !important;">
            <li>
              <%=link_to 'LOGO', root_path %>
            </li>
          </ul>
          <ul class=" nav navbar-toolbar navbar-right " style="display: -webkit-inline-box; float: right;">
            <% if user_signed_in? %> 
            <li class="dropdown">
              <a class="navbar-avatar dropdown-toggle " data-toggle="dropdown" href="#" aria-expanded="false" style="color: #fff;">
                <span class="avatar avatar-online" style="width: 30px;">
                  <% if user_signed_in? && current_user.avatar.present? %>
                  <%= image_tag (current_user.avatar(:thumb)),height: '30px', style: ' border-radius: 50%;
                  border: 2px solid #fff;'%>
                  <% else %>
                      <img src="<%=root_url%>/assets/user_default.jpg" alt="..." height= '30px', style= ' border-radius: 50%;
                  border: 2px solid #fff;'>
                  <% end %>
                  <span class="caret" style="color: #fff;"></span>
                </span>
              </a>
              <ul role="menu" class="dropdown-menu bullet dropdown-menu-right" style="min-width: 10px !important; padding: 10px; left: -10px;">

                <li class="divider" role="presentation"></li>
                <li role="presentation">
                  <%= link_to destroy_user_session_path, method: :delete, class: "hover-progress" do %>
                  <i class="icon fa-power-off" aria-hidden="true"></i>Logout
                  <% end %>
                </li>
              </ul>
            </li>
            <% else %>
            <li class="hidden-xs">
              <%= link_to "Log In", new_user_session_path, class: "" %> 
            </li> 
            <%end%>
          </ul>
        </div>
      </div>
    </nav>

This navbar has to unordered lists. First one contain logo of the project which shows on the left side of window and another one contains links like if user is not signed in, it will show login option and if the user is signed in it will show user profile picture (if user upload that otherwise it shows default pic of user that will added in the image folder under assets of the project) and also a dropdown which has only logout option for now.

https://steemitimages.com/DQmbeW3pFtJCZZCUUiCrsdy9BrFA9Ds2FNNER1p5xALfGjh/image.png

You can customise the nav bar according to your requirements.

Download the GitHub sample project from the here

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors