Bootstrap Nav Pills

Posted in Bootstrap, Bootstrap Code Snippets

Bootstrap Nav Pills Code

<ul class=”nav nav-pills”>
<li role=”presentation” class=”active”><a href=”#”>Home</a></li>
<li role=”presentation”><a href=”#”>Profile</a></li>
<li role=”presentation”><a href=”#”>Messages</a></li>
</ul>

Bootstrap Nav Pills Example JSFiddle

Bootstrap Nav Pills Vertical Code

<ul class=”nav nav-pills nav-stacked”>
<li role=”presentation” class=”active”><a href=”#”>Home</a></li>
<li role=”presentation”><a href=”#”>Profile</a></li>
<li role=”presentation”><a href=”#”>Messages</a></li>
</ul>

Bootstrap Nav Pills Vertical Example JSFiddle

Bootstrap Nav Pills with Dropdown

<ul class=”nav nav-pills”>
<li role=”presentation” class=”active”><a href=”#”>Home</a></li>
<li role=”presentation” class=”dropdown”>
<a class=”dropdown-toggle” data-toggle=”dropdown” href=”#” role=”button” aria-haspopup=”true” aria-expanded=”false”>
Dropdown <span class=”caret”></span>
</a>
<ul class=”dropdown-menu”>
<li role=”presentation”><a href=”#”> Messages </a></li>
<li role=”presentation”><a href=”#”> Messages </a></li>
<li role=”presentation”><a href=”#”> Messages </a></li>
</ul>