<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Section 1 <span class="round-tabs one">
<i class="icon icon-pencil"></i>
</span></a></li>
<li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2 <span class="round-tabs two">
<i class="icon icon-pencil"></i>
</span></a></li>
<li role="presentation"><a href="#Section3" aria-controls="settings" role="tab" data-toggle="tab">Section 3 <span class="round-tabs three">
<i class="icon icon-pencil"></i>
</span></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<h3>Section 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus purus euismod nec. Duis in lacinia neque. Etiam tellus.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<h3>Section 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus purus euismod nec. Duis in lacinia neque. Etiam tellus.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<h3>Section 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus purus euismod nec. Duis in lacinia neque. Etiam tellus.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
a:hover,a:focus{
text-decoration: none;
outline: none;
}
.tab .nav-tabs{
border-bottom: 1px solid #b6367f;
}
.tab .nav-tabs li{
margin: 0 2px 0 0;
position: relative;
}
.tab .nav-tabs li.active:before{
content: "";
position: absolute;
bottom: -28px;
left: 51px;
border: 14px solid transparent;
border-top-color: #b6367f;
}
.tab .nav-tabs li.active:after{
content: "";
position: absolute;
bottom: -24px;
left: 53px;
border: 12px solid transparent;
/*border-top-color: #fff;*/
}
.tab .nav-tabs li a{
border: none;
padding: 13px 35px;
font-size: 14px;
color: #777;
background: transparent;
border-radius: 0;
}
.tab .nav-tabs li a:hover{
color: #b6367f;
}
.tab .nav-tabs li a i{
display: block;
text-align: center;
margin-bottom: 5px;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover{
border: none;
background: transparent;
color: #b6367f;
transition: background 0.20s linear 0s;
}
.tab .tab-content{
font-size: 14px;
color: #777;
background: #fff;
line-height: 25px;
padding: 10px;
}
.tab .tab-content h3{
font-size: 26px;
}
@media only screen and (max-width: 479px) {
.tab .nav-tabs li a{
padding: 10px;
}
.tab .nav-tabs li.active:before{
left: 28px;
bottom: -24px;
border-width: 12px;
}
.tab .nav-tabs li.active:after{
left: 30px;
bottom: -20px;
border-width: 10px;
}
}
span.round-tabs{
width: 15px;
height: 15px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 45%;
text-align: center;
font-size: 25px;
top: 84%;
}
span.round-tabs.one{
border: 2px solid #ddd;
color: #ddd;
}
li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five {
background: #f8f8f8 !important;
border: 2px solid #f8f8f8;
color: #fff;
}
span.round-tabs.two{
border: 2px solid #ddd;
color: #ddd;
}
span.round-tabs.three{
border: 2px solid #ddd;
color: #ddd;
}
.nav-tabs > li.active > a span.round-tabs{
background: #fafafa;
}
