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.

EXAMPLE:


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

<!--Bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

><!--Latest stable release of jQuery Core Library-->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<!--Bootstrap JS-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</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>  
</ul>  
</li>  
<li><a href="some_link.html">SERVICES</a></li>  
<li><a href="some_link.html">CONTACT</a></li>  
</ul>  
</nav>

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