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.
<!-- Compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">>
<!--jQuery-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">
</script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 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>
</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.
