Center content in responsive bootstrap navbar

Question

I\'m having trouble centering my content in the bootstrap navbar. I\'m using bootstrap 3. I\'ve read many posts, but the CSS or methods used will not work with my code! I\'m

Answer 1

I think this is what you are looking for. You need to remove the float: left from the inner nav to center it and make it a inline-block.

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

http://jsfiddle.net/bdd9U/2/

Edit: if you only want this effect to happen when the nav isn't collapsed surround it in the appropriate media query.

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

http://jsfiddle.net/bdd9U/3/