
Bootstrap Navs and Pills use to create different type of navigation’s for our website.
This is Unordered list in html and we add css to make menu.
<ul>
<li><a href="#">List1</a></li>
<li><a href="#">List2</a></li>
<li><a href="#">List3</a></li>
<li><a href="#">List4</a></li>
</ul>
in bootstrap there are already classes for create menu. if we want to create Horizontal Menu then we have to add .list-inline in our <ul>
<ul class="list-inline">
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Bootstrap Tabs
We can create Horizontal tabs by using class .nav-tabs.
We can Also mark the current page with <li class="active">
.
<ul class="nav nav-tabs">
<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Nav Tabs With Dropdown Menu
We can add Dropdown nav in nav tab by suing class . dropdown in <li>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Nav-1</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Nav-2
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Nav-1</a></li>
<li><a href="#">Dropdown Nav-2</a></li>
<li><a href="#">Dropdown Nav-3</a></li>
</ul>
</li>
<li><a href="#">Nav-3</a></li>
<li><a href="#">Nav-4</a></li>
</ul>
Bootstrap Pills
We can create Pills by using class <ul class=”nav nav-pills”> and we can add current active class using <li class=”active”>
<ul class="nav nav-pills">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
Bootstrap Vertical Pills
By using class .nav-stacked we can create vertical pills.
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>