Twitter Bootstrap: Center Pills

Question

My question is how you can center the pills?

I've tried to add center block around and also to change the float:left to float:center but nothing helps.

Answer 1

This has gotten much simpler! You just need to use the text-center class on the container, and apply display:inline-block to the ul. Just make sure you have a line break or paragraph tag separating the nav from any other elements within the container.

Done! 2 class additions, 1 line of CSS (don't modify the bootstrap css file!).

HTML:

<div class="col-md-12 text-center">     <p>Copyright stuff</p>     <ul class="nav nav-pills center-pills">         <li><a href="#">Footer nav link</a></li>         <li><a href="#">Footer nav link</a></li>     </ul> </div> 

CSS:

.center-pills { display: inline-block; } 

Edit 2015: As Artur Beljajev has brought up, Flexbox support is now common enough that you may want to use that instead:

.center-pills {     display: flex;     justify-content: center; } 

Answer 2

If you'd like variable width pills in a variable width container, I'd suggest using the inline-block display type and adding a class to the pill container.

Here is how I extended bootstrap for centering pills.

CSS:

.centered-pills { text-align:center; } .centered-pills ul.nav-pills { display:inline-block; } .centered-pills li { display:inline; } .centered-pills a { float:left; } * html .centered-pills ul.nav-pills { display:inline; } /* IE6 */ *+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */ 

HTML:

<div class="row">   <div class="span12 centered-pills">     <ul class="nav nav-pills">       <li><a href="#">derek</a></li>       <li><a href="#">brooks</a></li>       <li><a href="#">is</a></li>       <li><a href="#">super</a></li>       <li class="active"><a href="#">awesome</a></li>     </ul>   </div> </div>