Centrar el contenido en la barra de navegación de bootstrap sensible

La publicación original preguntaba cómo centrar la barra de navegación colapsada. Para centrar elementos en la barra de navegación normal, intente esto:

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

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

Hay otra forma de hacer esto para los diseños que no tienen que poner la barra de navegación dentro del contenedor, y que no requiere ninguna sobreescritura CSS o Bootstrap.

Simplemente coloque un div con la clase Bootstrap container alrededor de la barra de navegación. Esto centrará los enlaces dentro de la barra de navegación:

<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 -->

Si desea alinear el contenido del cuerpo a la barra de navegación central, también coloque ese contenido del cuerpo en la etiqueta Bootstrap container.

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

No todo el mundo puede usar este tipo de diseño (algunos la gente necesita anidar la propia barra de navegación dentro de la container). Sin embargo, si puedes hacerlo, es una manera fácil de obtener los enlaces de la barra de navegación y el cuerpo centrado.

Puedes ver los resultados en esta página completa JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result /

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

Este código funcionó para mí

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}

Del sitio oficial de bootstrap (y, casi, como dijo Eric S. Bullington.

Https://getbootstrap.com/components/#navbar-default

La barra de navegación de ejemplo se ve así:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        ...etc

Para centrar el nav, que lo que he hecho:

<div class="container-fluid" id="nav_center">

Css:

@media (min-width:768px) { /* don't break navbar on small screen */
    #nav_center {
        width: 700px /* need to found your width according to your entry*/
    }
}

Trabaje con class="container" y navbar-derecha o izquierda, y por supuesto puede reemplazar id por clase. : D

Actualización 2018

Bootstrap 4

Centrar el contenido de la barra de navegación es más fácil es Bootstrap 4 y puedes ver muchos escenarios de centrado explicados aquí: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

Otro escenario que no parece haber sido respondido todavía es centrar tanto la marca y enlaces de la barra de navegación. Aquí hay un solución..

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

Http://www.codeply.com/go/1lrdvNH9GI

Véase también: Bootstrap NavBar with left, center or right aligned items

Parece que todas estas respuestas involucran css personalizado sobre bootstrap. La respuesta que estoy proporcionando utiliza solo bootstrap, así que espero que se use para aquellos que desean limitar las personalizaciones.

Esto se probó con Bootstrap V3. 3. 7

<footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-offset-5 col-xs-2 text-center">
                <p>I am centered text<p>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
</footer>

V4 de BootStrap está agregando Centro (justify-content-center) y Alineación Derecha (justify-content-end) según: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Utilice el siguiente html

<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Collect the nav links, forms, and other content for toggling -->
            <ul class="nav navbar-nav">
                <li><h5><a href="#/">Home</a></h5></li>
                <li>|</li>
                <li><h5><a href="#products">About</a></h5></li>
                <li>|</li>
                <li><h5><a href="#">Contacts</a></h5></li>
                <li>|</li>
                <li><h5><a href="#cart">Cart</a></h5></li>
            </ul>
    </div><!-- /.container-fluid -->
</nav>

Y css

.navbar-nav {
  width: 100%;
  text-align: center;
}
.navbar-nav > li {
  float: none;
  display: inline-block;
}
.navbar-default {
  background-color: white;
  border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
  background-color:white;
}

Modificar de acuerdo a sus necesidades

Esto debería funcionar

 .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}