css - Twitter Bootstrap 3.0 Logo in the center of navbar

Question

I want to center my logo in the navbar, can I use or should I use grid layouts inside navbar or I should do something else:

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
        <div class="navbar-header">
                            <!-- I want this at the center of navbar -->
            <a class="navbar-brand" href="#"><img src="logo.png"/></a>
        </div>
</div>

Answer 1

Unfortunately the accepted answer is using html for Bootstrap 2. However, I've come up with several ways to do this using Bootstrap 3. The simplest way to do this is probably using css translate.

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

Live Demo: http://codepen.io/candid/pen/dGPZvR

This method also allows us to use background images for the logo and allows us to include text without having it show up in the display.

HTML:

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text</a>

CSS:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

Live Demo: http://codepen.io/candid/pen/NxWoJL

If for some reason you only want to do this on mobile display simply wrap .navbar-brand in a media query...

/* CENTER ON MOBILE ONLY */
@media (max-width: 768px) {
.navbar-brand {
        transform: translateX(-50%);
        left: 50%;
        position: absolute;
    }
}