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
And then, the following Bootstrap 3 and jQuery JS files are inherited.
1. jquery.min.js
2. bootstrap.min.js
<link rel="stylesheet" href='' media="screen" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=''></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>
        <!-- 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 role="tabpanel" class="tab-pane" id="employment">
                This is Employment Information Tab
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.


Other available versions