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


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"
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      <a class="navbar-brand pull-left" href="/">
        <%= image_tag 'logo_300w.png', border: "2", class: "img", style: "margin-top: -14px;" %>

  HTML code for links omitted.

Step 3

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

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.