How to Position Logo using Twitter Boostrap 3.3.1 in Rails 4.2 Project
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.
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>
That's it. Thanks to Paul Gemignani of 4waytours for this CSS hack.
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