Bootstrap Tabs and Pills
The user can quickly access the content by switching between the panes without leaving the page.
Bootstrap Menus:
The Bootstrap menu is often defined in an unordered list <ul>. You have to add the .list-inline class to <ul> to create a horizontal menu.
Example:
<div class="container"> <h3>Inline List</h3> <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> </div>
OUTPUT:
Bootstrap Tabs:
Create a basic navigation tag with <ul class=”nav nav-tabs”>, and also mark the current page with <li class=”active”>.
Example:
<div class="container"> <h3>Bootstrap Tabs</h3> <ul class="nav nav-tabs"> <li class="active"><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> <br> </div>
OUTPUT:
Bootstrap Tabs with Dropdown Menu:
Tabs can also use the hold dropdown menu.
Example:
<div class="container"> <h3>Tabs With Dropdown Menu</h3> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <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="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </div>
OUTPUT:
Bootstrap Toggleable / Dynamic Tabs:
Add the data-toggle=”tab” attribute to each link, then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content, to make tags toggleable.
The tabs to fade in and fade out when clicking on them, add the .fade class to .tab-pane.
Example:
<div class="container"> <h2> Bootstrap Dynamic Tabs</h2> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Home</a></li> <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <h3>HOME</h3> <p>enter content here....</p> </div> <div id="menu1" class="tab-pane fade"> <h3>Menu 1</h3> <p>enter content2 here....</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>enter content3 here....</p> </div> <div id="menu3" class="tab-pane fade"> <h3>Menu 3</h3> <p>Tenter content3 here....</p> </div> </div> </div>
OUTPUT:
Pills:
Create pills with <ul class=”nav nav-pills”>, and also mark the current page with <li class=”active”>.
Example:
<div class="container"> <h3>Pills</h3> <ul class="nav nav-pills"> <li class="active"><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> </div>
OUTPUT:
Bootstrap Vertical Pills:
If you want Pills displayed vertically, just add the .nav-stacked class.
Example:
<div class="container"> <h3>Bootstrap Vertical Pills</h3> <ul class="nav nav-pills nav-stacked"> <li class="active"><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> </div>
OUTPUT:
Pills With Dropdown Menu:
Use dropdown menu with pills.
Example:
<div class="container"> <h3>Pills With Dropdown Menu</h3> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <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="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </div>
OUTPUT:
Centered Tabs and Pills:
Center or justify the tabs and pills, use the .nav-justified class.
Example:
<div class="container"> <h3>Centered Tabs</h3> <ul class="nav nav-tabs nav-justified"> <li class="active"><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> <br> <h3>Centered Pills</h3> <ul class="nav nav-pills nav-justified"> <li class="active"><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> </div>
OUTPUT:
Bootstrap Toggleable Dynamic Pills:
Same as toggleable dynamic tabs; only change the data-toggle attribute to data-toggle=”pill”.
Example:
<div class="container"> <h2>Dynamic Pills</h2> <ul class="nav nav-pills"> <li class="active"><a data-toggle="pill" href="#home">Home</a></li> <li><a data-toggle="pill" href="#menu1">Menu 1</a></li> <li><a data-toggle="pill" href="#menu2">Menu 2</a></li> <li><a data-toggle="pill" href="#menu3">Menu 3</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <h3>HOME</h3> <p>enter content here1.......</p> </div> <div id="menu1" class="tab-pane fade"> <h3>Menu 1</h3> <p>enter content here2.......</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>enter content here3.......</p> </div> <div id="menu3" class="tab-pane fade"> <h3>Menu 3</h3> <p>enter content here4.......</p> </div> </div> </div>
OUTPUT: