AngryHacker AngryHacker - 4 years ago 584
HTML Question

How to properly align a brand image in bootstrap

It is not a duplicate of this. That question is about replacing the text logo with image. This question is about placing an image in addition to the text logo.

I have the following bootstrap code that attempts to show the site logo followed by its name. I am using the bootstrap class navbar-brand to do so:

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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" href="./EnterpriseCopy_files/EnterpriseCopy.html">
<img src="./EnterpriseCopy_files/android-icon-48x48.png">
</a>
<a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">Enterprise Copy</a>
</div>
<div class="navbar-collapse collapse">


The logo ends up looking like this:

enter image description here

I then have to add
style="margin-top:-13px"
to the
img
tag in order to push up the image and make it look good:

enter image description here

This can't be the right way to do this. Is there a better way of doing this?

The original code here, one with the style tweak here.

Answer Source

The problem is with .navbar-brand having padding:

padding: 15px 15px;

It is in bootstrap's default style. So remove that and give:

.navbar-brand {padding: 0;}

You are all set. See the screenshot, where I gave padding: 0; to see it work:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download