In this article I will explain with an example, how to use Bootstrap Tabs.
This article makes use of Bootstrap version 3.
The Bootstrap 3 Tab Structure
Bootstrap 3 Tab consists of three major elements.
1. Tab Panel – It is the container element within which the Tabs are created.
2. Tab Header – It comprises of an HTML Unordered List which represents the Tab headers. Each List element consists of HTML Anchors which when clicked its respective pane is shown.
Note: To make a Tab active (selected) by default, you will need to add class active to the HTML LI element.
3. Tab Panes – Panes are shown when a Tab is clicked. They hold the content to be shown when a particular Tab is clicked.
Each Tab Pane has been set a unique ID of the Tab Pane in the href and aria-controls attributes of the Tab Header anchor elements, so that when the HTML anchor is clicked the corresponding Tab Pane will show.
HTML Markup
The HTML Markup consists of:
DIV – For displaying Bootstrap Tab and panels.
Bootstrap Tab Implementation
Inside the HTML, the following Bootstrap 3 CSS file is inherited.
1. bootstrap.min.css
1. jquery.min.js
2. bootstrap.min.js
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal </a></li>
<li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Employment</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px">
<div role="tabpanel" class="tab-pane active" id="personal">
This is Personal Information Tab
</div>
<div role="tabpanel" class="tab-pane" id="employment">
This is Employment Information Tab
</div>
</div>
</div>
</div>
Screenshot
![Bootstrap 3: Simple Bootstrap Tabs example]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
