How-to Center Align Bootstrap Nav Pills

In Twitter Bootstrap there are navigation (nav) pills and by default, it is left aligned.Before center aligning the nav pills:

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:

– [Home](#)
– [Profile](#)
– [Messages](#)

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


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 for nav pills, before center aligning, looks like this:

The HTML for center aligned nav pills looks like this:

As you can see, all we did if wrapped the previous HTML with

at the beginning and


at the end.