Rectangle 27 1

css Centering brand logo in Bootstrap 3 Navbar?


.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}
.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}
transform: translateX(-50%);

Cowardly downvote with no explanation?

In Bootstrap 4, mx-auto or flexbox can be used to center the brand and other elements. See How to position navbar contents in Bootstrap 4 for an explanation.

The "edit" solution is perfect. I had to use this approach vs the more simple absolute centering one because it was messing with my site's google analytics and extending across the page.

Your markup is for Bootstrap 2, not 3. There is no longer a navbar-inner.

Note
Rectangle 27 1

css Centering brand logo in Bootstrap 3 Navbar?


.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}
.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}
transform: translateX(-50%);

Cowardly downvote with no explanation?

In Bootstrap 4, mx-auto or flexbox can be used to center the brand and other elements. See How to position navbar contents in Bootstrap 4 for an explanation.

The "edit" solution is perfect. I had to use this approach vs the more simple absolute centering one because it was messing with my site's google analytics and extending across the page.

Your markup is for Bootstrap 2, not 3. There is no longer a navbar-inner.

Note
Rectangle 27 1

css Centering brand logo in Bootstrap 3 Navbar?


.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

Centering your logo by 50% and minus half of your logo width so that it won't have problem when zooming in and out.

I only wanted to center the logo on mobile (screen-sm) devices so I wrote a media query, set the position as absolute, offset the margin-left by 1/2 the width of the logo image, and set the left value to 50%. Works like a charm.

My headache was solved by this answer. Thanks man.

You can now use transform:translateX(-50%) isntead of margin-left for this to work with any logo width.

Note
Rectangle 27 1

css Centering brand logo in Bootstrap 3 Navbar?


.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

Centering your logo by 50% and minus half of your logo width so that it won't have problem when zooming in and out.

I only wanted to center the logo on mobile (screen-sm) devices so I wrote a media query, set the position as absolute, offset the margin-left by 1/2 the width of the logo image, and set the left value to 50%. Works like a charm.

My headache was solved by this answer. Thanks man.

You can now use transform:translateX(-50%) isntead of margin-left for this to work with any logo width.

Note
Rectangle 27 1

css Centering brand logo in Bootstrap 3 Navbar?


.brand-centered {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.navbar-brand {
  display: flex;
  align-items: center;
}
.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  width: 200px; /* no height needed ... image will resize automagically */
}
.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
        </a>
@media (max-width: 768px) {

}

@Hardycore didn't notice that. Easy fix though. I updated the codepen. Just need to add .navbar-toggle { z-index: 1; }

Actually, this might not work when the nav is collapsed! Unable to click the button to drop down the menu!

This way also works with dynamically sized background images for the logo and allows us to utilize the text-hide class:

To only achieve these results on mobile simply wrap the above css inside a media query:

We can also use flexbox though. However, using this method we'd have to move navbar-brand outside of navbar-header. This way is great though because we can now have image and text side by side:

Note
Rectangle 27 1

css Centering brand logo in Bootstrap 3 Navbar?


.navbar-brand
{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    background-image: url('logo.png');
}

I've found the easiest way to do it is to have the image as the background image of the navbar-brand. Just makes sure to put in a custom width.

Old question, but just for posterity.

This was the only solution that worked for me with dynamic brand image sizes

Note
Rectangle 27 1

css Centering brand logo in Bootstrap 3 Navbar?


.navbar-brand
{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    background-image: url('logo.png');
}

I've found the easiest way to do it is to have the image as the background image of the navbar-brand. Just makes sure to put in a custom width.

Old question, but just for posterity.

This was the only solution that worked for me with dynamic brand image sizes

Note
Rectangle 27 1

css Centering brand logo in Bootstrap 3 Navbar?


.brand-centered {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.navbar-brand {
  display: flex;
  align-items: center;
}
.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  width: 200px; /* no height needed ... image will resize automagically */
}
.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
        </a>
@media (max-width: 768px) {

}

@Hardycore didn't notice that. Easy fix though. I updated the codepen. Just need to add .navbar-toggle { z-index: 1; }

Actually, this might not work when the nav is collapsed! Unable to click the button to drop down the menu!

This way also works with dynamically sized background images for the logo and allows us to utilize the text-hide class:

To only achieve these results on mobile simply wrap the above css inside a media query:

We can also use flexbox though. However, using this method we'd have to move navbar-brand outside of navbar-header. This way is great though because we can now have image and text side by side:

Note