The Bootstrap Tab Plug-in
Bootstrap has a built-in JavaScript plug-in that enables you creating tabs in web pages quite easily. It is the matter of including a few CSS classes and initiating tabs by data attributes or JavaScript.
A Short Video of this Tutorial
In the tutorial, I will show you creating Bootstrap tabs with default color scheme as well as using customized CSS to let you match tab and its content according to your web site’s design.
Let me start with a simple example of Tabs in Bootstrap.
A simple tabs example with default CSS
For the basic demo, I have created tabs by using the unordered list <ul> tag of HTML with built-in Bootstrap classes.
Five tabs are created while each tab is created by using the <li> inside that <ul> tag. See the demo online and steps to create this below:
See online demo and code
First of all, two libraries are included in the head section of demo page.
One is the Bootstrap JS library. You also need to include jQuery library. I have used the CDNs for both.
You also need to include the Bootstrap CSS file in the <head> section that contains the classes related to tabs as well as other components.
In the markup section, a <ul> tag is used to create tabs:
<ul class="nav nav-tabs" role="tablist">
The <ul> is assigned the nav and nav-tab classes, that are built-in.
After that, tabs are created by using the <li> tags. For the demo, I created five tabs. You may add or remove as per requirement:
<li class="active"><a href="#hometab" role="tab" data-toggle="tab">Home</a></li> <li><a href="#javatab" role="tab" data-toggle="tab">Java</a></li> <li><a href="#csharptab" role="tab" data-toggle="tab">C#</a></li> <li><a href="#mysqltab" role="tab" data-toggle="tab">MySQL</a></li> <li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li> </ul> </li>
Use the .active class in a <li> tag that you want to open as the web pages loads. I used it in the Home tab. Each tag is activated by using the data-toggle=”tab” in each <li> element, that represents a tab.
Each <li> is also given an id which is used in the content / tab-pane of each tab.
The final step is to create the content of each tab in the tab panes. A div is created with tab-content class:
<div class=”tab-content”>
Inside that <div>, five more div elements are used to create tab panes for each tab that are associated by ids. For example:
<div class=”tab-pane active” id=”hometab”>Write something for home tab</div>
It represents the “Home” tab and so on. You ca also use other HTML elements like <p> tag rather <div> for tab content.
You can see the complete code in the demo page’s code section.
Customized Bootstrap Tabs demo
In this example, I will show you how to change the default look of Tabs of bootstrap by using CSS classes.
First have a look at the online demo, which is followed by a little description:
Basically, I have overridden the default classes of Bootstrap CSS to custom properties. For example, the nav-tabs class is used to change the background color of the main container of tabs.
nav-tabs > li.active > a defines the active tab and so on. Following is the CSS used for this custom Tab Bootstrap:
<style>
.nav-tabs{
background-color:#C8D3DB;
}
.nav-tabs > li > a{
border-radius: 5px;
}
.nav-tabs > li > a:hover{
background-color: #3D515F !important;
border-radius: 5px;
color:#fff;
border:1px solid black;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
background-color: #68889E !important;
color:#fff;
border:2px solid #3F515F;
}
</style>
To make this style work, you have to place this style after referring to the Bootstrap CSS. If you are using an external CSS file for your website and included that file above the Bootstrap CSS then changes will not work.
Customizing the content area of Tabs
In above example, only tabs CSS is customized. In pro websites, you may need to change the content area as well where tab information is displayed. For example, adding a border or background color, etc.
The following demo shows how you can do this:
This demo is using the same number of tabs as in the above example. However, the content area or tab-pane is also customized with CSS properties.
The tab panes are using tab-pane class whose properties are changed in the <head> section in <style> tag:
.tab-pane {
border:solid 1px #1A3E5E;
border-top: 0;
width:60%;
background-color:#D6E6F3;
padding:5px;
}
Apart from that, I used a different color scheme for the tabs which also overridden the default classes:
.nav-tabs
{
border-color:#1A3E5E;
width:60%;
}
.nav-tabs > li a {
border: 1px solid #1A3E5E;
background-color:#2F71AB;
color:#fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
background-color:#D6E6F3;
color:#000;
border: 1px solid #1A3E5E;
border-bottom-color: transparent;
}
.nav-tabs > li > a:hover{
background-color: #D6E6F3 !important;
border-radius: 5px;
color:#000;
}
You may adjust the width accordingly. Also, the border-bottom property of the active tab is kept transparent to merge it with the tab’s content background color.
For the demonstration, I also used <li> tags inside the “Java” tab that means you can use the different type of content in the Bootstrap tabs.
Adding the fading effect in the Tabs
The following example is a replica of the above demo, except I added the fade in class to the active tab and fade to the other tab-panes.
You can see the fading effect as you click from one tab to another.
Copy/paste the following code in your editor to see this working:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.nav-tabs
{
border-color:#1A3E5E;
width:60%;
}
.nav-tabs > li a {
border: 1px solid #1A3E5E;
background-color:#2F71AB;
color:#fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
background-color:#D6E6F3;
color:#000;
border: 1px solid #1A3E5E;
border-bottom-color: transparent;
}
.nav-tabs > li > a:hover{
background-color: #D6E6F3 !important;
border-radius: 5px;
color:#000;
}
.tab-pane {
border:solid 1px #1A3E5E;
border-top: 0;
width:60%;
background-color:#D6E6F3;
padding:5px;
}
</style>
</head>
<body>
<div class="container">
<h3>A demo of Bootstrap Tabs</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
<li class="active"><a href="#javatab" role="tab" data-toggle="tab">Java</a></li>
<li><a href="#csharptab" role="tab" data-toggle="tab">C#</a></li>
<li><a href="#mysqltab" role="tab" data-toggle="tab">MySQL</a></li>
<li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
</ul>
</li>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade" id="hometab">Write something for home tab</div>
<div class="tab-pane fade in active" id="javatab">The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.
The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.<br /><br />
The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.
The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.<br /><br />
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
<li>Chapter 4</li>
</ul>
</div>
<div class="tab-pane fade" id="csharptab">C# is also a programming language</div>
<div class="tab-pane fade" id="mysqltab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane fade" id="jquerytab">jQuery content here</div>
</div>
</body>
</html>
Another style of tabs in Bootstrap with custom CSS
The following demo of tabs is styled differently by using custom CSS along with Bootstrap classes. You may add the fading effect or display without any effect as a user switches from one tab to the other. Have a look at the code and output:
Markup and CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<style>
.tab .nav-tabs {
border-bottom:0 none;
}
.tab .nav-tabs li a{
position: relative;
padding: 15px;
color: #804000;
font-size: 17px;
z-index: 1;
}
.tab .nav-tabs li a:hover{
background:transparent;
border:1px solid transparent;
}
.tab .nav-tabs li a:before{
content: "";
width:100%;
height:100%;
position:absolute;
bottom: 8px;
left:-2px;
background: #FFB871;
border: 1px solid #d3d3d3;
border-bottom: 0px none;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-right-radius:25px;
border-top-left-radius:25px;
transform-origin: left center 0;
transform: perspective(6px) rotateX(3deg);
z-index:-30;
}
.tab .nav-tabs li{
margin-right: 15px;
}
.tab .nav-tabs li.active a:before{
background: #804000;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover{
border:1px solid transparent;
background:transparent;
color: #fff;
font-weight:300;
z-index: 2;
}
.tab-content .tab-pane{
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
border: 1px solid #804000;
padding: 20px;
background:#FFF0E1;
line-height: 22px;
}
.tab-content .tab-pane h4{
margin-top: 0;
font-weight:700;
font-size: 20px;
}
@media only screen and (max-width: 767px) {
.tab .nav-tabs li a{
padding: 15px 10px;
font-size: 14px;
}
.tab .nav-tabs li a:before{
bottom: 6px;
}
}
@media only screen and (max-width: 499px) {
.tab .nav-tabs li{
width:100%;
margin-bottom: 5px;
margin-top: 5px;
}
.tab .nav-tabs li a:before{
bottom: 0;
transform: none;
border-bottom: 1px solid #408080;
}
}
</style>
</head>
<body>
<div class="container">
<h2>A demo of Bootstrap tabs</h2>
<div class="row">
<div class="col-md-8">
<div class="tab" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#javatab" aria-controls="home" role="tab" data-toggle="tab">Java Tutorial</a></li>
<li role="presentation"><a href="#jquerytab" aria-controls="profile" role="tab" data-toggle="tab">jQuery Tutorial</a></li>
<li role="presentation"><a href="#ctab" aria-controls="messages" role="tab" data-toggle="tab">C# Tutorial</a></li>
<li role="presentation"><a href="#mysqltab" aria-controls="settings" role="tab" data-toggle="tab">MySQL Tutorial</a></li>
</ul>
<!-- Tab panes content goes here-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade-in active" id="javatab">
<h4>Java</h4>
<p>
The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.
The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.<br /><br />
The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.
The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.<br /><br />
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
<li>Chapter 4</li>
</ul>
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="jquerytab">
<h4>jQuery</h4>
<p>
jQuery content here
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="ctab">
<h4>C#</h4>
<p>
C# is also a programming language
</p>
</div>
<div role="tabpanel" class="tab-pane tada" id="mysqltab">
<h4>MySQL</h4>
<p>
MySQL is a databased mostly used for web applications.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To see another style and how to customize CSS for this tabs style, visit this tabs tutorial.
You may also add dropdowns in Bootstrap tabs that display its own content. This may be useful for situations where you have sub-section for the main tab or web page space constraints. For adding a dropdown in tabs, you just need to include the dropdown related classes.
Complete code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.nav-tabs
{
border-color:#004A00;
width:60%;
}
.nav-tabs > li a {
border: 1px solid #004A00;
background-color:#004A00;
color:#fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
background-color:#D5FFD5;
color:#000;
border: 1px solid #1A3E5E;
border-bottom-color: transparent;
}
.nav-tabs > li > a:hover{
background-color: #D5FFD5 !important;
border-radius: 5px;
color:#000;
}
.tab-pane {
border:solid 1px #004A00;
border-top: 0;
width:60%;
background-color:#D5FFD5;
padding:5px;
}
</style>
</head>
<body>
<div class="container">
<h3>A demo of Bootstrap Tabs</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#javatab" role="tab" data-toggle="tab">Java</a></li>
<li><a href="#csharptab" role="tab" data-toggle="tab">C#</a></li>
<li><a href="#mysqltab" role="tab" data-toggle="tab">MySQL</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
<li><a href="#bootstab" role="tab" data-toggle="tab">Bootstrap</a></li>
<li><a href="#htmltab" role="tab" data-toggle="tab">HTML</a></li>
</ul>
</li>
</ul>
</li>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="hometab">Write something for home tab</div>
<div class="tab-pane" id="javatab">The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.
</div>
<div class="tab-pane" id="csharptab">C# is also a programming language</div>
<div class="tab-pane" id="mysqltab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane" id="jquerytab">jQuery content here </div>
<div class="tab-pane" id="bootstab">Bootstrap Content here
<ul>
<li>Bootstrap forms</li>
<li>Bootstrap buttons</li>
<li>Bootstrap navbar</li>
<li>Bootstrap footer</li>
</ul>
</div>
<div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
</div>
</body>
</html>
I have written a detailed guide for adding the dropdown in tabs: Adding dropdowns in tabs of Bootstrap.