In this we will discuss the Bootstrap tabs plugin.
Bootstrap tutorial for beginners
The following example creates 3 tabs (Home, Contact & Locations). Locations dropdown contain 2 more tabs (India and USA)
Classes that are useful for customizing the behaviour of the tabs plugin
Bootstrap tutorial for beginners
The following example creates 3 tabs (Home, Contact & Locations). Locations dropdown contain 2 more tabs (India and USA)
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap tutorial for begineers</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br />
<div class="container">
<div class="row">
<div class="col-xs-6">
<ul class="nav nav-tabs">
<li class="active">
<a href="#homeTab" data-toggle="tab">Home</a>
</li>
<li>
<a href="#contactTab" data-toggle="tab">Contact</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Locations <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#indiaTab" data-toggle="tab">India</a></li>
<li><a href="#usaTab" data-toggle="tab">USA</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="homeTab" class="tab-pane active">
<h3>Home</h3>
<p>Home page content</p>
</div>
<div id="contactTab" class="tab-pane">
<h3>Contact</h3>
<p>Contact page content</p>
</div>
<div id="indiaTab" class="tab-pane">
<h3>India</h3>
<p>India Location Details</p>
</div>
<div id="usaTab" class="tab-pane">
<h3>USA</h3>
<p>USA Location Details</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Classes that are useful for customizing the behaviour of the tabs plugin
| Class | Description |
|---|---|
| fade | Animates the tabs to fade in. The first tab pane must also have in class to make the initial content visible |
| nav-justified | To make the tabs plugin span the entire width of the parent container |
.png)