In this article I will explain with an example, how to use Bootstrap Tabs.
This article makes use of Bootstrap version 4.
 
 
The Bootstrap 4 Tab Structure
Bootstrap 4 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 Button which when clicked its respective panel 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 id and data-target attributes of the Tab Header Button elements, so that when the HTML Button 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 4 CSS file is inherited.
1. bootstrap.min.css
 
And then, the following Bootstrap 4 and jQuery JS files are inherited.
1. jquery.min.js
2. bootstrap.bundle.min.js
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css' />
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js'></script>
<div style="width: 500px; padding: 10px; margin: 10px">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="personal-tab" data-toggle="tab" data-target="#personal"
                type="button" role="tab" aria-controls="personal" aria-selected="true">
                Personal</button>
        </li>
        <li class="nav-item"role="presentation">
            <button class="nav-link" id="employment-tab" data-toggle="tab" data-target="#employment"
                type="button"role="tab"aria-controls="employment"aria-selected="false">
                Employment</button>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="personal" role="tabpanel" aria-labelledby="personal-tab">
            This is Personal Information Tab
        </div>
        <div class="tab-pane fade" id="employment" role="tabpanel" aria-labelledby="employment-tab">
            This is Employment Information Tab
        </div>
    </div>
</div>
 
 
Screenshot
Bootstrap 4: 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
View Demo
 
 
Downloads
Download Code


Other available versions