How to justify navbar-nav in Bootstrap 3

Question

I'm attempting to justify a navbar (make the navbar contents stretch) in Bootstrap 3. I've added margin: 0 auto; max-width: 1000px; to the nav* classes, and also attempted to add a container element as a parent to the ul. As a last check, I did what was suggested in this answer by adding navbar-justified to the navbar class, but this caused everything to scrunch together on the left without justifying the entire navbar.

Doing a nav nav-justified ul does make the ul center, but it doesn't retain the styles of the navbar-nav class since it's not part of the ul, and it doesn't look great when the screen is smaller than 768px.

How do I justify a Bootstrap 3 navbar?

Edit: For those who are interested in a more complete answer, here is some code I use in production:

// Stylesheet .navbar-nav>li {   float: none; }  // Navbar <nav class="navbar navbar-default">   <ul class="nav nav-justified navbar-nav">     <li><a href="/">Home</a></li>     <li><a href="group.html">Group</a></li>     <li><a href="services.html">Services</a></li>     <li><a href="positions.html">Positions</a></li>   </ul> </nav> 

And here is a working jsFiddle. You may have to stretch the size of the result box for it to show correctly. If you're interested in centering the actual list without the nav stretching to full width, see David Taiaroa's jsFiddle.

Answer 1

You can justify the navbar contents by using:

@media (min-width: 768px){   .navbar-nav{      margin: 0 auto;      display: table;      table-layout: fixed;      float: none;   } }   

See this live: http://jsfiddle.net/panchroma/2fntE/

Answer 2

To justify the bootstrap 3 navbar-nav justify menu to 100% width you can use this code:

@media (min-width: 768px){     .navbar-nav {         margin: 0 auto;         display: table;         table-layout: auto;         float: none;         width: 100%;     }     .navbar-nav>li {         display: table-cell;         float: none;         text-align: center;     } }