How to properly align a brand image in bootstrap

Question

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:

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:

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.

Possible duplicate of [Bootstrap 3 Navbar with Logo](http://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo) — herrh, Dec 28 '15 at 20:25

score 2 · Accepted Answer · answered Dec 28 '15 at 20:22

2

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:

answered Dec 28 '15 at 20:22

Praveen Kumar Purushothaman

164,888
24
203
252

That doesn't really work because you are messing with the navbar-brand of the text logo as well.. But it did lead me to the solution, which is replacing navbar-brand class on the img tag with pull-left. – AngryHacker Dec 29 '15 at 00:39
1

I did, mistakenly. I was looking at the wrong tab, sorry. Anyway, accepted as the answer, since it led me to the answer. – AngryHacker Dec 29 '15 at 00:42

score 1 · Answer 2 · answered Dec 29 '15 at 00:44

If want to add both an image and text inside the navbar-brand class instead of separating them, apply display: inline-block to your img and then adjust the padding for navbar-brand itself to accommodate everything.

.navbar .navbar-brand {
  padding: 2px 15px;
}

.navbar .navbar-brand img {
  display: inline-block;
}

See working Snippet.

body {
  padding-top: 50px;
  padding-bottom: 20px;
}
/* Wrapping element */

/* Set some basic padding to keep content from hitting the edges */

.body-content {
  padding-left: 15px;
  padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */

input,
select,
textarea {
  max-width: 280px;
}
/* Carousel */

.carousel-caption {
  z-index: 10 !important;
}
.carousel-caption p {
  font-size: 20px;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .carousel-caption {
    z-index: 10 !important;
  }
}
/**ADDED CSS**/

.navbar .navbar-brand {
  padding: 2px 7.5px;
}
.navbar .navbar-brand img {
  display: inline-block;
}
/**ADDED CSS**/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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="http://vbrad.com/misc/EnterpriseCopy_files/android-icon-48x48.png">Enterprise Copy
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="./EnterpriseCopy_files/EnterpriseCopy.html">Mailbox</a>
        </li>
        <li><a href="./EnterpriseCopy_files/EnterpriseCopy.html">Copy Groups</a>
        </li>
        <li><a href="./EnterpriseCopy_files/EnterpriseCopy.html">Home</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="https://localhost:44302/#">bar@foo.com</a>
        </li>
        <li><a href="https://localhost:44302/Account/SignOut">Sign Out</a>
        </li>
      </ul>
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Jul 16 '19 at 19:02

0

For me, setting class d-inline-block and align-middle on both anchor elements worked. I'm using bootstrap 4.3.1.

answered Jul 16 '19 at 19:02

staxim

1,328
14
15

How to properly align a brand image in bootstrap

3 Answers3