Twitter Bootstrap: Center Pills - html

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>Footer nav link</li>
<li>Footer nav link</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>derek</li>
<li>brooks</li>
<li>is</li>
<li>super</li>
<li class="active">awesome</li>
</ul>
</div>
</div>

Answer 3

Or flexbox approach:
.nav-pills {
display: flex;
justify-content: center;
}

Answer 4

If you want the pills to be centered instead of left aligned you will need to change the css. You will need to specifiy a width and change the margin to be auto.
For example:
.tabs, .pills {
margin: 0 auto;
padding: 0;
width: 400px;
}

Answer 5

While the answer of #minaz works for a list with a known width, i'd propose a different solution which actually works even if you change the content of the list:
.tabs, .pills {
text-align: center;
}
.tabs li, .pills li {
float: none;
}
Or in SCSS:
.tabs, .pills {
text-align: center;
li { float: none; }
}
This will center the text inside the list, and resets the float property for the list items so they are affected by the text-align property.

Answer 6

A simple solution with Bootstrap 4
Use justify-content-center at <ul> nav
Example:
#import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="mt-5">
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="card text-white bg-success mb-3 mx-2 px-2">
<h1>Hi</h1>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="card text-white bg-info mb-3 mx-2 px-2">
<h1>Hi</h1>
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="card text-white bg-danger mb-3 mx-2 px-2">
<h1>Ni Hao</h1>
</div>
</div>
</div>
</div>

Answer 7

Bootstrap 4 solution is very easy:
<ul class="nav justify-content-center">
https://getbootstrap.com/docs/4.0/components/navs/