Bootstrap
In this tutorial we will learn about navs in Bootstrap.
We use the .nav class to create navs in Bootstrap.
.nav
To create a simple nav tabs we use the .nav-tabs class.
.nav-tabs
For tabs with tabbable areas, include the tab JavaScript plugin.
<ul class="nav nav-tabs"> <li role="presentation"><a href="#">Home</a></li> <li role="presentation"><a href="#">About</a></li> <li role="presentation"><a href="#">Contact us</a></li> </ul>
Output:
We can select a tab by adding the .active class.
.active
<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">About</a></li> <li role="presentation"><a href="#">Contact us</a></li> </ul>
To create nav pills we use the .nav-pills class.
.nav-pills
<ul class="nav nav-pills"> <li role="presentation"><a href="#">Home</a></li> <li role="presentation"><a href="#">About</a></li> <li role="presentation"><a href="#">Contact us</a></li> </ul>
We can also add the .active class to select a tab.
<ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">About</a></li> <li role="presentation"><a href="#">Contact us</a></li> </ul>
We can even stack the nav pills using the .nav-stacked class.
.nav-stacked
<ul class="nav nav-pills nav-stacked"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">About</a></li> <li role="presentation"><a href="#">Contact us</a></li> </ul>
We use the .nav-justified class to make the tabs and pills equal widths of their parent for screen size wider than 768px. For smaller screen the nav links are stacked.
.nav-justified
<ul class="nav nav-tabs nav-justified"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">About</a></li> <li role="presentation"><a href="#">Contact us</a></li> </ul>
<ul class="nav nav-pills nav-justified"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">About</a></li> <li role="presentation"><a href="#">Contact us</a></li> </ul>
We can add the .disabled class to disable a nav link.
.disabled
<ul class="nav nav-pills"> <li role="presentation"><a href="#">Home</a></li> <li role="presentation"><a href="#">About</a></li> <li role="presentation" class="disabled"><a href="#">Contact us</a></li> </ul>
We can even add .dropdown inside a .nav-pills and .nav-tabs.
.dropdown
Use the dropdowns JavaScript plugin when creating dropdowns.
<ul class="nav nav-pills"> <li role="presentation"><a href="#">Home</a></li> <li role="presentation"><a href="#">About</a></li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> More Menu <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </li> </ul>