Twitter Bootstrap 4 Forms and Navigation in Rails 5

We will continue to work on the Movies database Rails 5 app we developed in Integrating Twitter Bootstrap 4 with Rails 5. In this article, you will learn how to style the forms and highlight the navigation tabs using Twitter Bootstrap 4.

Generate a welcome controller with about action.

rails g controller welcome about

Add some text to the about.html.erb. Define the routes for the about page.

get 'welcome/about', to: 'welcome#about', as: :about

Change the static links in the header partial.

<li class="nav-item <%= active_class('movies', 'new') %>">
  <%= link_to '/movies/new', class: "nav-link" do %>
    New Movie
    <span class="sr-only"> <%= active_span('movies', 'new') %> </span>
  <% end %>   
</li>   

<li class="nav-item <%= active_class('welcome', 'about') %>">
  <%= link_to about_path, class: 'nav-link' do %>
    About
    <span class="sr-only"> <%= active_span('welcome', 'about') %> </span>
  <% end %>
</li>

Add helper methods to highlight the navigation tab in application_helper.rb file.

module ApplicationHelper
  def active_class(controller_name, action_name)    
    "active" if current_page?(controller: controller_name, action: action_name)
  end

  def active_span(controller_name, action_name)
    "(current)" if current_page?(controller: controller_name, action: action_name)
  end
end

You will now be able to see the tab highlighted when you click on 'New Movies' or 'About' page. Let's add a border and a box shadow around the page. In application.scss:

#wrapper {
  border: 1px #e4e4e4 solid;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 0 6px #ccc;
  background-color: #fff;
}

In the layout file use the wrapper.

<div id= 'wrapper' class="container">
  <% flash.each do |name, msg| %>
    <%= content_tag(:div, msg, class: "alert alert-info") %>
  <% end %>

  <%= yield %>
</div>

You will now see a nice shadow around all the pages in the webapp. You can download the source code for this project from FilmBuff

Note: I don't know if the drop shadow effect is applicable for tablets and smart phones. Please let me know if you have any suggestions.

Summary

In this article, you learned how to style the form and highlight navigation tab using Twitter Bootstrap 4. We also added a box shadow effect for the pages.

Reference

Create a border and a box shadow around the page


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.