Center Align Bootstrap Nav Pills

This tutorial will show you how to center align nav pills in Bootstrap.

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

HTML

<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>

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

Get the latest posts delivered right to your inbox.