Custom Web Design & Development

Bootstrap Centered Horizontal Pills

Stacked Pills:

In this demo, we show how to take Boostrap Vertically Stacked Pills and make them horizontal and centered on medium & large devices only.  In this example, the Products link has an "active" (you are here) class.


If your document doesn't already contain them, add links to Bootstrap and jQuery files.

<!-- Compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">>

<script src="" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">

<script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

CSS Code:

.centered-pills { 
  text-align: center; 
  background: #EAEAEA; 
  font-size: 18px; 
.centered-pills ul.nav-pills { 
  display: inline-block; 
.centered-pills li { 
  display: inline; 

/**change stacked nav to horizontal on md-lg displays**/ 
@media (min-width: 768px) { 
  .nav-stacked > li { 
    display: inline-block;}
  .nav-stacked > li + li { 
    margin-top: 0; 
    margin-left: 2px;} 

HTML Code:

<nav class="centered-pills">  
<ul class="nav nav-pills nav-stacked">  
<li><a href="some_link.html">HOME</a></li>
<li><a href="some_link.html">ABOUT</a></li>
<li class="dropdown active"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PRODUCTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>  
<li><a href="#">Submenu 1-2</a></li>  
<li><a href="#">Submenu 1-3</a></li>  
<li><a href="some_link.html">SERVICES</a></li>  
<li><a href="some_link.html">CONTACT</a></li>  

That's all there is to it. Hope you enjoyed this quick demonstration with Bootstrap Pills.