How To Use Bootstrap On Rails App - Create A Sample Web Application On Rails Part02

In this series I will create a simple web application. It includes the following main components:

Mostly static pages, use bootstrap
Users can signin, signout, remember user signin
Home page show all users, update their profiles, admin users can delete other users.
User can following or unfollow other users
Users can post articles, update and destroy their posts.
Users login and make their comments on articles.
Home page show all articles and current user profile, paging.
Build url for article
Simple search articles
Type ahead, use gon gem.

Ok, start!

Part I - Create sample app

Part II, Use bootstrap on rails application.

# cd sample_app

1. Create StaticPages controller

# rails g controller StaticPages home help about

If you want undo

# rails destroy controller StaticPages home help about

Then point to /static_pages/home display:

Open config/routes.rb and edit:

Rails.application.routes.draw do
  get 'home' => 'static_pages#home'
  get 'help' => 'static_pages#help'
  get 'about' => 'static_pages#about'
  root 'static_pages#home'
end

Now, go /home = /static_pages/home, web root pages also point to home page. To modify home page, edit views/static_pages/home.html.erb file

Use bootstrap

Go to http://getbootstrap.com/
Example navbar:

<nav class="navbar navbar-default">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><%= link_to 'Link', '#' %> <span class="sr-only">(current)</span></li>
        <li><%= link_to 'Link', '#' %></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><%= link_to 'Action', '#' %></li>
            <li><%= link_to 'Other action', '#' %></li>
            <li><%= link_to 'More action', '#' %></li>
            <li class="divider"></li>
            <li><%= link_to 'Separated link', '#' %></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to 'Login', '#' %></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Create new file: views/layouts/_header.html.erb and copy sample navbar code above to it.
Open views/layouts/application.html.erb and add following line:


  <%= render 'layouts/header' %>
  
  <%= yield %>

Refresh browser:

To use bootstrap, add bootstrap gem to Gemfile

gem 'bootstrap-sass',       '3.2.0.0'

Then run command

# bundle install --without production

Create styles.css.scss

$ touch app/assets/stylesheets/styles.css.scss

Add following lines to styles.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

Restart web server and point to http://localhost:3000

Same above, you can create _footer.html.erb file or any other you want

Create pages title

Open layouts/application.html.erb and edit as:

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <%= stylesheet_link_tag "application", media: "all",
                                           "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>    
  </head>
  <body>
    <%= render 'layouts/header' %>  
    <div class="container">  
      <% flash.each do |message_type, message| %>
      <div class="alert alert-<%= message_type %>"><%= message %></div>
      <% end %>    
      <%= yield %>
      <%= render 'layouts/footer' %>
      <%= debug(params) if Rails.env.development? %> 
    </div>
  </body>
</html>

Create full_title function

Open app/helpers/application_helper.html.erb file and edit

module ApplicationHelper
  # Returns the full title on a per-page basis.
  def full_title(page_title = '')
    base_title = "Ruby on Rails Tutorial Sample App"
    if page_title.empty?
      base_title
    else
      "#{page_title} | #{base_title}"
    end
  end	
end

Update on github and push to heroku

# git status
# git add -A
# git commit -m "Create StaticPages and use bootstrap"
# git push origin master
# git push heroku master -f
# heroku open

May you need!

If on heroku not apply bootstrap, open config/environments/production.rb and edit:

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = true

Then push again to github and push it on heroku.
rubyonrails

Tutorials Blog

March 02, 2015