Bootstrap Menus
Bootstrap menu is used to create different types of menu. It can created horizontal with its
.list-inlineclass.
<div class="container">
<h3>Example of Bootstrap Menu</h3>
<ul class="list-inline">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">services</a></li>
</ul>
</div>
Try Now
Bootstrap Tabs
Bootstrap tabl is look like is menu but there is some difference. We can create a basic navigation tag with <
ul class="nav nav-tabs">. You can mark the current page with <
li class="active">.
Let us see an example of Bootstrap Tabs:
<div class="container">
<h3>Example of Tabs</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Try Now
Bootstrap Tabs with Dropdown Menu
We can create tabs with the dropdown menu.
Let us see an example of Bootstrap Tabs with Dropdown Menu:
<div class="container">
<h3>Example of Tabs</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="#">Tutorial
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">Bootstrap</a></li>
</ul>
</li>
<li><a href="#">Service</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Try Now
Bootstrap Pills
We can create pills with the help of <
ul class="nav nav-pills">. By default it is supported horizontal.
Let us see an example of Bootstrap Pills:
<div class="container">
<h3>Example of Pills</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Try Now
Bootstrap Vertical Pills
We can create vertical pill by using
.nav-stacked class.
<div class="container">
<h3>Example of Vertical Pills</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="#">Tutorial
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">Bootstrap</a></li>
</ul>
</li>
<li><a href="#">Service</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Try Now
Note : We can create center/justify Tabs and pills by using .nav-justified class.
Bootstrap Dynamic Pills
Bootstrap Dynamic Pills is same as dynamic toggleable tabs but there is some difference that can be understand by its example.
Example
<div class="container">
<h2>Example of 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">Service</a></li>
<li><a data-toggle="pill" href="#menu2">About</a></li>
<li><a data-toggle="pill" href="#menu3">Contact</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Welcome to <strong>Home Page</strong>. Today we are learning Bootstrap Tutorial.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Services</h3>
<p>Welcome to our<strong> Service Page</strong>. We provides a lots of services.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>About</h3>
<p>Welcome to<strong> About Page.</strong> We provides a lots of services.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Contact</h3>
<p>You can <strong> Contact us.</strong></p>
</div>
</div>
</div>
Try Now