How to Position Logo using Twitter Boostrap 3.3.1 in Rails 4.2 Project

Apr 02, 2015

Steps

Step 1

There are two resized images logo_300w.png and logo_500w.png that needs to be copied to app/assets/images/ folder.

The images have dimensions of 300x53 500x88 with 72 pixels/inch resolution. Both images have transparent background so that it blends with the current background color of the navigation bar.

Step 2

Customize the navbar-brand in the navigation as follows

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">
      <button type="button" class="navbar-toggle" 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 pull-left" href="/">
        <%= image_tag 'logo_300w.png', border: "2", class: "img", style: "margin-top: -14px;" %>
      </a>
    </div>

  HTML code for links omitted.
</nav>

Step 3

That's it. Thanks to Paul Gemignani of 4waytours for this CSS hack.

twitter bootstrap 3.3.1 rails 4.2

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