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
*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
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.
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.
You can customise the nav bar according to your requirements.
Download the GitHub sample project from the here
Curriculum
- https://utopian.io/utopian-io/@amn/how-to-upload-images-in-ruby-on-rails-using-paperclip
- https://utopian.io/utopian-io/@amn/how-to-show-image-and-resizing-in-ruby-on-rails-usign-paperclip
Posted on Utopian.io - Rewarding Open Source Contributors