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='' />
<script type="text/javascript" src=''></script>
<script type="text/javascript" src=''></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">
        <li class="nav-item"role="presentation">
            <button class="nav-link" id="employment-tab" data-toggle="tab" data-target="#employment"
    <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 class="tab-pane fade" id="employment" role="tabpanel" aria-labelledby="employment-tab">
            This is Employment Information Tab
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.


Other available versions