Bootstrap 3 Navbar with Logo

Why is everyone trying to do it the hard way? Sure, some of these approaches will work, but they’re more complicated than is necessary.

OK, first – you need an image that will fit within your navbar. You can adjust your image via css height attribute (allowing width to scale) or you can just use an appropriately sized image. Whatever you decide to do – the way this looks will depend on how well you size your image.

For some reason, everyone wants to stick the image inside of an anchor with navbar-brand, and this isn’t necessary. navbar-brand applies text styles that aren’t necessary to an image, as well as the navbar-left class (just like pull-left, but for use in a navbar). All you really need is to add navbar-left.

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

You can even follow this with a navbar-brand item, which will appear to the right of the image.

Leave a Comment