<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="p-4">
<!--Classic Tabs Secton-->
<div class="classic-tab-wrap py-3">
<div class="heading-tab">
<h3>Horizontal - Classic Tabs</h3>
</div>
<div class="tab-wrap">
<ul class="nav nav-tabs" id="classicTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="classic-1-tab" data-toggle="tab" href="#classic-1" role="tab"
aria-controls="classic-1" aria-selected="true"><i class="fa fa-thumbs-up"
aria-hidden="true"></i>First</a>
</li>
<li class="nav-item">
<a class="nav-link" id="classic-2-tab" data-toggle="tab" href="#classic-2" role="tab"
aria-controls="classic-2" aria-selected="false"><i class="fa fa-thumbs-up"
aria-hidden="true"></i>Second</a>
</li>
<li class="nav-item">
<a class="nav-link" id="classic-3-tab" data-toggle="tab" href="#classic-3" role="tab"
aria-controls="classic-3" aria-selected="false"><i class="fa fa-thumbs-up"
aria-hidden="true"></i>Third</a>
</li>
</ul>
<div class="tab-content" id="classicTabContent">
<div class="tab-pane fade show active" id="classic-1" role="tabpanel" aria-labelledby="classic-1-tab">
classic Tab 1
</div>
<div class="tab-pane fade" id="classic-2" role="tabpanel" aria-labelledby="classic-2-tab">
classic Tab 2
</div>
<div class="tab-pane fade" id="classic-3" role="tabpanel" aria-labelledby="classic-3-tab">
classic Tab 3
</div>
</div>
</div>
</div>
<!--Floating Tabs - Horizontal Section -->
<div class="floating floatingH-tab-wrap py-3">
<div class="heading-tab">
<h3>Floating Tabs - Horizontal</h3>
</div>
<div class="tab-wrap">
<div class="tab-head">
<ul class="nav nav-tabs" id="floatingHTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="floatingH-1-tab" data-toggle="tab" href="#floatingH-1" role="tab"
aria-controls="floatingH-1" aria-selected="true"><i class="fa fa-thumbs-up"
aria-hidden="true"></i>First</a>
</li>
<li class="nav-item">
<a class="nav-link" id="floatingH-2-tab" data-toggle="tab" href="#floatingH-2" role="tab"
aria-controls="floatingH-2" aria-selected="false"><i class="fa fa-thumbs-up"
aria-hidden="true"></i>Second</a>
</li>
<li class="nav-item">
<a class="nav-link" id="floatingH-3-tab" data-toggle="tab" href="#floatingH-3" role="tab"
aria-controls="floatingH-3" aria-selected="false"><i class="fa fa-thumbs-up"
aria-hidden="true"></i>Third</a>
</li>
</ul>
</div>
<div class="tab-content" id="floatingHTabContent">
<div class="tab-pane fade show active" id="floatingH-1" role="tabpanel" aria-labelledby="floatingH-1-tab">
floatingH Tab 1
</div>
<div class="tab-pane fade" id="floatingH-2" role="tabpanel" aria-labelledby="floatingH-2-tab">
floatingH Tab 2
</div>
<div class="tab-pane fade" id="floatingH-3" role="tabpanel" aria-labelledby="floatingH-3-tab">
floatingH Tab 3
</div>
</div>
</div>
</div>
<!--Floating Tabs - Horizontal Section -->
<!--Pills Tabs - Horizontal Section -->
<div class="pills pillsH-tab-wrap py-3">
<div class="heading-tab">
<h3>Pills Tabs - Horizontal</h3>
</div>
<div class="tab-wrap">
<div class="tab-head">
<ul class="nav nav-tabs" id="pillsHTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pillsH-1-tab" data-toggle="tab" href="#pillsH-1" role="tab"
aria-controls="pillsH-1" aria-selected="true"><i class="fa fa-thumbs-up"
aria-hidden="true"></i>First</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pillsH-2-tab" data-toggle="tab" href="#pillsH-2" role="tab"
aria-controls="pillsH-2" aria-selected="false"><i class="fa fa-thumbs-up"
aria-hidden="true"></i>Second</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pillsH-3-tab" data-toggle="tab" href="#pillsH-3" role="tab"
aria-controls="pillsH-3" aria-selected="false"><i class="fa fa-thumbs-up"
aria-hidden="true"></i>Third</a>
</li>
</ul>
</div>
<div class="tab-content" id="pillsHTabContent">
<div class="tab-pane fade show active" id="pillsH-1" role="tabpanel" aria-labelledby="pillsH-1-tab">
pillsH Tab 1
</div>
<div class="tab-pane fade" id="pillsH-2" role="tabpanel" aria-labelledby="pillsH-2-tab">
pillsH Tab 2
</div>
<div class="tab-pane fade" id="pillsH-3" role="tabpanel" aria-labelledby="pillsH-3-tab">
pillsH Tab 3
</div>
</div>
</div>
</div>
<!--Pills Tabs - Horizontal Section Ends-->
<!-- Floating Tabs - Vertical Section -->
<div class="pills floatingV-tab-wrap py-3">
<div class="heading-tab">
<h3>Floating Tabs - Vertical</h3>
</div>
<div class="tab-wrap">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="floatingV-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="floatingV-tab-1-tab" data-toggle="pill" href="#floatingV-tab-1"
role="tab" aria-controls="floatingV-tab-1" aria-selected="true">Home</a>
<a class="nav-link" id="floatingV-tab-2-tab" data-toggle="pill" href="#floatingV-tab-2" role="tab"
aria-controls="floatingV-tab-2" aria-selected="false">Profile</a>
<a class="nav-link" id="floatingV-tab-3-tab" data-toggle="pill" href="#floatingV-tab-3" role="tab"
aria-controls="floatingV-tab-3" aria-selected="false">Messages</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="floatingV-tabContent">
<div class="tab-pane fade show active" id="floatingV-tab-1" role="tabpanel"
aria-labelledby="floatingV-tab-1-tab">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.</p>
</div>
<div class="tab-pane fade" id="floatingV-tab-2" role="tabpanel"
aria-labelledby="floatingV-tab-2-tab">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="tab-pane fade" id="floatingV-tab-3" role="tabpanel"
aria-labelledby="floatingV-tab-3-tab">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries,</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Floating Tabs - Vertical Ends-->
<!-- Pills Tabs - Vertical Section -->
<div class="pills pillsV-tab-wrap py-3">
<div class="heading-tab">
<h3>Pills Tabs - Vertical</h3>
</div>
<div class="tab-wrap">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="pillsV-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="pillsV-tab-1-tab" data-toggle="pill" href="#pillsV-tab-1" role="tab"
aria-controls="pillsV-tab-1" aria-selected="true">Home</a>
<a class="nav-link" id="pillsV-tab-2-tab" data-toggle="pill" href="#pillsV-tab-2" role="tab"
aria-controls="pillsV-tab-2" aria-selected="false">Profile</a>
<a class="nav-link" id="pillsV-tab-3-tab" data-toggle="pill" href="#pillsV-tab-3" role="tab"
aria-controls="pillsV-tab-3" aria-selected="false">Messages</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="pillsV-tabContent">
<div class="tab-pane fade show active" id="pillsV-tab-1" role="tabpanel"
aria-labelledby="pillsV-tab-1-tab">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.</p>
</div>
<div class="tab-pane fade" id="pillsV-tab-2" role="tabpanel" aria-labelledby="pillsV-tab-2-tab">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="tab-pane fade" id="pillsV-tab-3" role="tabpanel" aria-labelledby="pillsV-tab-3-tab">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries,</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pills Tabs - Vertical Ends-->
</div>
/**Classic Tabs Wrap**/
.classic-tab-wrap .tab-wrap {
padding: 20px;
background: #f5f5f5;
}
.classic-tab-wrap .tab-wrap .nav-tabs li {
margin: 0;
}
.classic-tab-wrap .tab-wrap .nav-tabs li a {
font-weight: 500;
font-size: 18px;
color: #8a8a8a;
border: none;
border-bottom: 2px solid transparent;
padding-left: 35px;
padding-right: 35px;
}
.classic-tab-wrap .tab-wrap .nav-tabs li a.active {
color: #495057;
background: transparent;
border-color: #495ab7;
}
.classic-tab-wrap .tab-wrap .nav-tabs li a i {
margin-right: 6px;
}
.classic-tab-wrap .tab-wrap .tab-pane {
padding: 20px;
}
.viewBtn {
padding-left: 20px;
padding-right: 20px;
outline: none !important;
box-shadow: none !important;
}
/**Floating**/
.floating .tab-wrap .nav-tabs {
padding: 18px;
border: none;
background: #5e8acf;
border-radius: 7px;
}
.floating .tab-wrap .nav-tabs .nav-item {
margin: 0;
width: 33.33%;
text-align: center;
}
.floating .tab-wrap .nav-tabs .nav-item a {
color: #fff;
font-weight: 400;
font-size: 18px;
border: none;
padding-left: 35px;
padding-right: 35px;
opacity: 1;
}
.floating .tab-wrap .nav-tabs .nav-item a.active {
background: #324295;
border-radius: 5px;
box-shadow: 0 0 10px #32429591;
}
.floating .tab-wrap .nav-tabs .nav-item a i {
margin: 0 5px 0 0;
}
/*Floating H*/
.floatingH-tab-wrap .tab-content {
padding: 70px 20px 30px 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: -40px;
}
.floatingH-tab-wrap .tab-head {
padding: 0 20px;
position: relative;
z-index: 1;
}
/**Pills Tabs - Horizontal**/
.pillsH-tab-wrap .tab-head {
padding: 10px;
}
.pillsH-tab-wrap .tab-head .nav-tabs {
border: none;
}
.pillsH-tab-wrap .tab-head .nav-tabs .nav-item {
margin: 0;
width: 33.33%;
text-align: center;
}
.pillsH-tab-wrap .tab-head .nav-tabs .nav-item a {
color: #666666;
font-weight: 400;
font-size: 18px;
border: none;
padding-left: 35px;
padding-right: 35px;
opacity: 1;
border-radius: 5px;
}
.pillsH-tab-wrap .tab-head .nav-tabs .nav-item a.active {
background: #2bbbad;
color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.pillsH-tab-wrap .tab-head .nav-tabs .nav-item a i {
margin-right: 5px;
}
.pillsH-tab-wrap .tab-content {
padding: 30px 20px 30px 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/**Pills Tabs - Horizontal Ends**/
/**Floating Tabs - Vertical **/
.floatingV-tab-wrap .nav {
padding: 18px;
border: none;
background: #4051b6;
border-radius: 7px;
}
.floatingV-tab-wrap .nav .nav-link.active {
background: #324295;
box-shadow: 0 0 10px #32429591;
}
.floatingV-tab-wrap .nav .nav-link {
color: #fff;
font-weight: 400;
font-size: 18px;
border: none;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.floatingV-tab-wrap .tab-content {
padding: 30px 20px 30px 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/**Floating Tabs - Vertical Ends **/
/**Pills Tabs - Vertical Section**/
.pillsV-tab-wrap .tab-content {
padding: 30px 20px 30px 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.pillsV-tab-wrap .nav {
padding: 18px;
border: none;
}
.pillsV-tab-wrap .nav .nav-link {
margin: 0 0 10px 0;
font-weight: 400;
font-size: 18px;
border: none;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
color: #666666;
}
.pillsV-tab-wrap .nav .nav-link:hover {
background: #e2e2e2;
}
.pillsV-tab-wrap .nav .nav-link.active {
background: #2bbbad;
color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
/**Pills Tabs - Vertical Section Ends**/
