Create an awesome tab using twitter bootstrap

 In Bootstrap, CSS, HTML, Javascript, Jquery

Website tab is a popular choice of web designer to represent website contents or elements. A website tab can display many website item in a section. It provides facility to user to see many elements by selecting the tab. Many jQuery tab plugin available to use in a website. Twitter Bootstrap tab is a popular tab used in many websites. In this tutorial I will show how add Bootstrap tab in website and make it nice. I will show how to styling bootstrap tab by adding custom CSS.

Create awesome tab using bootstrap

To make bootstrap tab need to create an HTML file. Now include the bootstrap css and js from MaxCDN or download from Bootstrap website. I include here from MaxCDN. Add the below code and save as tab.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<title>Tab</title>
</head>
<body>

</body>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</html>

After this add HTML code for tab that will be something like below.

<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">TAB 1</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">PTAB 2</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">TAB 3</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h4>TAB 1</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<h4>TAB 2</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<h4>TAB 3</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>

The output will be like the below image.

Create Awesome Tab, Styling Bootstrap Tab, Bootstrap Tab Design

Styling Bootstrap tab

Now we style the tab to make this awesome. To make this awesome include the below CSS code in HTML files.

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
position: relative;
background: #ff5a5f !important;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border-color:#ff5a5f;
color:#fff;
}
.nav-tabs > li.active > a:after{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #ff5a5f transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 50%;
margin-left:-15px;
}
.nav-tabs > li > a {
background:#ff272e !important;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border-color:#ff272e;
padding:0 2em;
height: 45px;
line-height:45px;
color:#fff;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.nav-tabs > li > a:hover{
border-color:#ff5a5f;
background: #ff5a5f !important;
}
.tab-content > .tab-pane {
border:1px solid #ddd;
border-top: none;
padding: 25px 10px 10px;
}

After adding this CSS this will look like below image

Create Awesome Tab, Styling Bootstrap Tab, Bootstrap Tab Design

Download the source code From Below:

 

 

Recent Posts

Leave a Comment