In this article I will provide a simple tutorial with example on how to use Bootstrap Tabs.
 
Adding jQuery and Bootstrap
The very first step is to add the jQuery and Bootstrap JavaScript and CSS files to your page.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
 
 
The Bootstrap Tab Structure
Bootstrap Tab consists of the 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 a unique ID and you need to set the 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.
Simple Bootstrap Tabs example
 
 
Bootstrap Tab Example
Following HTML Markup consists of a Bootstrap Tab consisting of two tabs and panels.
<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
Simple Bootstrap Tabs example
 
Demo
 
Downloads