How-to Center Align Bootstrap Nav Pills

In Twitter Bootstrap there are navigation (nav) pills and by default, it is left aligned. But, what if you wanted to center align the nav pills? We can wrap the navigation with a HTML div element and add a bit of CSS.

This is what we’re going to achieve:

Note: The colouring of the nav pills may look different for you, as the above demos are using the CSS of this website.

The CSS

Add the following to your CSS file or wrap the following CSS in <style>``</style> tags.

.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, *+html .centered-pills ul.nav-pills { display: inline }

The HTML

The HTML for center aligned nav pills looks like this:

<div class="centered-pills">
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
</div>