Center content in responsive bootstrap navbar

Question

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/

The original post was asking how to center the collapsed navbar. To center elements on the normal navbar, try this:

.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

.navbar-nav > li {
    display: inline-block;
    float:none;
}

There's another way to do this for layouts that doesn't have to put the navbar inside the container, and which doesn't require any CSS or Bootstrap overrides.

Simply place a div with the Bootstrap container class around the navbar. This will center the links inside the navbar:

<nav class="navbar navbar-default">
  <!-- here's where you put the container tag -->
  <div class="container">

    <div class="navbar-header">
    <!-- header and collapsed icon here -->
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
      <!-- links here -->
      </ul>
    </div>
  </div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->

If you want the then align body content to the center navbar, you also put that body content in the Bootstrap container tag.

<div class="container">
  <! -- body content here -->
</div>

Not everyone can use this type of layout (some people need to nest the navbar itself inside the container). Nonetheless, if you can do it, it's an easy way to get your navbar links and body centered.

You can see the results in this fullpage JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/

Source: http://jsfiddle.net/bdd9U/229/

For Bootstrap 4:

Just use

<ul class="navbar-nav mx-auto">

mx-auto will do the job