How can I focus on Twitter-Bootstrap 3 navigation links?

Question

How can I center the buttons in jsFiddle setting so that the buttons are equally spaced and centered inside and outside the navigation bar?

http://jsfiddle.net/3GQyq/3/

I tried different methods like

display:inline-block;margin:0 auto; text-align:center; 

But I can’t make it work.

If you could give a little explanation instead of just fixing the CSS as I want to find out, so I don't need to come back here.

EDIT:

Just like they are centered here.

Answer 1

Bootstrap 3 has a new nav-justified class for this purpose. No extra CSS required:

 <div class="container"> <h3 class="text-muted">Project name</h3> <ul class="nav nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Services</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> 

Demo: http://bootply.com/72519

Also see: Bootstrap NavBar with left, center, and right aligned

Answer 2

Add style

 .nav{ text-align: center; } 

This centers the text in li.

Check feed

These styles should be sufficient. You tried to apply styles to the wrong item.

 // This is being applied by the bootstrap // Set it to 25px instead of the default 15px .navbar{ padding : 0 25px; } // Gave a width of 110px for each li // as the container is following a fixed width format li{ width:110px; }