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

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:

http://img1.123freevectors.com/wp-content/uploads/icon_big/038_icon_beautiful-navigation-bar-free-vector.jpg Just like they are centered here.

+12
css twitter-bootstrap centering navbar
Aug 07 '13 at 2:25
source share
2 answers

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

+15
Aug 07 '13 at 11:24
source share
β€” -

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; } 
+2
Aug 07 '13 at 2:32 on
source share



All Articles