Brandon Himpfen
Official site of Brandon Himpfen

Brandon Himpfen's Blog

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.

Toggle the tabs to view the HTML and CSS.

See the Pen Center Align Bootstrap Nav Pills by Brandon Himpfen (@brandonhimpfen) on CodePen.

As you can see, all we did if wrapped the previous HTML with <div class="centered-pills"> at the beginning and </div> at the end.