Bootstrap Tabs - Component Snippets
6 Unique tab styles for Bootstrap, tabs are popular feature of web design. It is a simple and intuitive way to organize content on a webpage. With Bootstrap Tabs, you can display information from your website in a sleek and modern way to highlight the most important or latest content.
Standard Tab
<div class="tabs">
<div class="single-tabs tabs-one">
<ul class="nav nav-justified" id="myTab" role="tablist">
<li class="nav-item">
<a class="active" id="tab-one-one-tab" data-bs-toggle="tab" href="#tab-one-one" role="tab"
aria-controls="tab-one-one" aria-selected="true">TAB 01</a>
</li>
<li class="nav-item">
<a id="tab-one-two-tab" data-bs-toggle="tab" href="#tab-one-two" role="tab"
aria-controls="tab-one-two" aria-selected="false">TAB 02</a>
</li>
<li class="nav-item">
<a id="tab-one-three-tab" data-bs-toggle="tab" href="#tab-one-three" role="tab"
aria-controls="tab-one-three" aria-selected="false">TAB 03</a>
</li>
<li class="nav-item">
<a id="tab-one-four-tab" data-bs-toggle="tab" href="#tab-one-four" role="tab"
aria-controls="tab-one-four" aria-selected="false">TAB 04</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="tab-one-one" role="tabpanel"
aria-labelledby="tab-one-one-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="tab-one-two" role="tabpanel" aria-labelledby="tab-one-two-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="tab-one-three" role="tabpanel" aria-labelledby="tab-one-three-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="tab-one-four" role="tabpanel" aria-labelledby="tab-one-four-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
</div>
<!-- tabs one -->
</div>/* tabs-one */
.tabs-one {
border: 1px solid var(--gray-4);
}
.tabs-one .nav {
border-bottom: 1px solid var(--gray-4);
}
@media (max-width: 767px) {
.tabs-one .nav {
display: block;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tabs-one .nav {
display: flex;
}
}
.tabs-one .nav .nav-item a {
font-size: 16px;
line-height: 24px;
color: var(--dark-3);
font-weight: 700;
padding: 13px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
display: block;
}
.tabs-one .nav .nav-item a.active {
color: var(--white);
background: var(--primary);
}
.tabs-one .tab-content .tab-text {
padding: 15px;
}
.tabs-one .tab-content .tab-text .text {
color: var(--dark-3);
}Tab Style 2
<div class="tabs">
<div class="single-tabs tabs-two">
<ul class="nav nav-justified" id="myTab" role="tablist">
<li class="nav-item">
<a class="active" id="tab-two-one-tab" data-bs-toggle="tab" href="#tab-two-one" role="tab"
aria-controls="tab-two-one" aria-selected="true">TAB 01</a>
</li>
<li class="nav-item">
<a id="tab-two-two-tab" data-bs-toggle="tab" href="#tab-two-two" role="tab"
aria-controls="tab-two-two" aria-selected="false">TAB 02</a>
</li>
<li class="nav-item">
<a id="tab-two-three-tab" data-bs-toggle="tab" href="#tab-two-three" role="tab"
aria-controls="tab-two-three" aria-selected="false">TAB 03</a>
</li>
<li class="nav-item">
<a id="tab-two-four-tab" data-bs-toggle="tab" href="#tab-two-four" role="tab"
aria-controls="tab-two-four" aria-selected="false">TAB 04</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="tab-two-one" role="tabpanel"
aria-labelledby="tab-two-one-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="tab-two-two" role="tabpanel" aria-labelledby="tab-two-two-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="tab-two-three" role="tabpanel" aria-labelledby="tab-two-three-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="tab-two-four" role="tabpanel" aria-labelledby="tab-two-four-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
</div>
<!-- tabs two -->
</div>/* tabs-two */
.tabs-two {
border: 1px solid var(--gray-4);
}
@media (max-width: 767px) {
.tabs-two .nav {
display: block;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tabs-two .nav {
display: flex;
}
}
.tabs-two .nav .nav-item a {
font-size: 16px;
line-height: 24px;
color: var(--dark-3);
font-weight: 700;
padding: 13px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
display: block;
border-bottom: 1px solid var(--gray-4);
position: relative;
}
.tabs-two .nav .nav-item a.active {
color: var(--primary);
background: var(--primary-light);
border: 1px solid var(--gray-4);
border-bottom: 0;
border-top: 0;
}
@media (max-width: 767px) {
.tabs-two .nav .nav-item a.active {
border: 1px solid var(--gray-4);
border-top: 0;
border-left: 0;
border-right: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tabs-two .nav .nav-item a.active {
border: 1px solid var(--gray-4);
border-bottom: 0;
border-top: 0;
}
}
.tabs-two .nav .nav-item a.active::before {
position: absolute;
content: "";
top: 0;
width: 100%;
height: 4px;
left: 0;
background: var(--primary);
}
.tabs-two .nav .nav-item:first-child a.active {
border-left: 0;
}
.tabs-two .nav .nav-item:last-child a.active {
border-right: 0;
}
.tabs-two .tab-content .tab-text {
padding: 15px;
}
.tabs-two .tab-content .tab-text .text {
color: var(--dark-3);
}Tab Style 3
<div class="tabs">
<div class="single-tabs tabs-three">
<ul class="nav nav-justified" id="myTab" role="tablist">
<li class="nav-item">
<a class="active" id="tab-three-one-tab" data-bs-toggle="tab" href="#tab-three-one" role="tab"
aria-controls="tab-three-one" aria-selected="true">
<i class="lni lni-vector"></i> TAB 01</a>
</li>
<li class="nav-item">
<a id="tab-two-three-tab" data-bs-toggle="tab" href="#tab-three-two" role="tab"
aria-controls="tab-three-two" aria-selected="false">
<i class="lni lni-pizza"></i> TAB 02</a>
</li>
<li class="nav-item">
<a id="tab-three-three-tab" data-bs-toggle="tab" href="#tab-three-three" role="tab"
aria-controls="tab-three-three" aria-selected="false">
<i class="lni lni-invention"></i> TAB 03</a>
</li>
<li class="nav-item">
<a id="tab-three-four-tab" data-bs-toggle="tab" href="#tab-three-four" role="tab"
aria-controls="three-two-four" aria-selected="false">
<i class="lni lni-dashboard"></i> TAB 04</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="tab-three-one" role="tabpanel"
aria-labelledby="tab-three-one-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="tab-three-two" role="tabpanel" aria-labelledby="tab-three-two-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="tab-three-three" role="tabpanel" aria-labelledby="tab-three-three-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="tab-three-four" role="tabpanel" aria-labelledby="tab-three-four-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
</div>
<!-- tabs three -->
</div>/* tabs-three */
@media (max-width: 767px) {
.tabs-three .nav {
display: block;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tabs-three .nav {
display: flex;
}
}
.tabs-three .nav .nav-item a {
font-size: 16px;
line-height: 24px;
color: var(--dark-3);
font-weight: 700;
padding: 13px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
display: block;
position: relative;
}
.tabs-three .nav .nav-item a i {
margin-right: 5px;
font-size: 18px;
}
.tabs-three .nav .nav-item a::before {
position: absolute;
content: "";
background-color: var(--gray-4);
width: 100%;
height: 4px;
left: 0;
bottom: 0;
}
.tabs-three .nav .nav-item a.active {
color: var(--primary);
background: var(--primary-light);
}
.tabs-three .nav .nav-item a.active::before {
background: var(--primary);
}
.tabs-three .tab-content .tab-text {
padding: 15px;
}
.tabs-three .tab-content .tab-text .text {
color: var(--dark-3);
}Tab Style 4
<div class="tabs">
<div class="single-tabs tabs-four">
<ul class="nav nav-justified" id="myTab" role="tablist">
<li class="nav-item">
<a class="active" id="tab-four-one-tab" data-bs-toggle="tab" href="#tab-four-one" role="tab"
aria-controls="tab-four-one" aria-selected="true">
<i class="lni lni-vector"></i> TAB 01</a>
</li>
<li class="nav-item">
<a id="tab-four-two-tab" data-bs-toggle="tab" href="#tab-four-two" role="tab"
aria-controls="tab-four-two" aria-selected="false">
<i class="lni lni-pizza"></i> TAB 02</a>
</li>
<li class="nav-item">
<a id="tab-four-three-tab" data-bs-toggle="tab" href="#tab-four-three" role="tab"
aria-controls="tab-four-three" aria-selected="false">
<i class="lni lni-invention"></i> TAB 03</a>
</li>
<li class="nav-item">
<a id="tab-four-four-tab" data-bs-toggle="tab" href="#tab-four-four" role="tab"
aria-controls="three-four-four" aria-selected="false">
<i class="lni lni-dashboard"></i> TAB 04</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="tab-four-one" role="tabpanel"
aria-labelledby="tab-four-one-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="tab-four-two" role="tabpanel" aria-labelledby="tab-four-two-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="tab-four-three" role="tabpanel" aria-labelledby="tab-four-three-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="tab-four-four" role="tabpanel" aria-labelledby="tab-four-four-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica. Reprehenderit butcher retro
keffiyeh dreamcatcher synth. <br /><br />
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</div>
</div>
</div>
</div>
<!-- tabs four -->
</div>/* tabs-four */
@media (max-width: 767px) {
.tabs-four .nav {
display: block;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tabs-four .nav {
display: flex;
}
}
.tabs-four .nav .nav-item a {
font-size: 16px;
line-height: 24px;
color: var(--dark-3);
font-weight: 700;
padding: 13px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
display: block;
position: relative;
}
@media (max-width: 767px) {
.tabs-four .nav .nav-item a {
margin-top: -4px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tabs-four .nav .nav-item a {
margin-top: 0;
}
}
.tabs-four .nav .nav-item a i {
margin-right: 5px;
font-size: 18px;
}
.tabs-four .nav .nav-item a::before {
position: absolute;
content: "";
background-color: var(--gray-4);
width: 100%;
height: 4px;
left: 0;
bottom: 0;
}
.tabs-four .nav .nav-item a.active {
color: var(--white);
background: var(--primary);
}
.tabs-four .nav .nav-item a.active::before {
background: var(--primary);
}
.tabs-four .tab-content .tab-text {
padding: 15px;
}
.tabs-four .tab-content .tab-text .text {
color: var(--dark-3);
}Tab Style 5
<div class="tabs">
<div class="single-tabs tabs-five">
<div class="row no-gutters">
<div class="col-sm-4">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="active" id="v-pills-five-one-tab" data-bs-toggle="pill" href="#v-pills-five-one"
role="tab" aria-controls="v-pills-five-one" aria-selected="true"><i class="lni lni-vector"></i>
TAB 01</a>
<a id="v-pills-five-two-tab" data-bs-toggle="pill" href="#v-pills-five-two" role="tab"
aria-controls="v-pills-five-two" aria-selected="false"><i class="lni lni-pizza"></i> TAB 02</a>
<a id="v-pills-five-three-tab" data-bs-toggle="pill" href="#v-pills-five-three" role="tab"
aria-controls="v-pills-five-three" aria-selected="false"><i class="lni lni-invention"></i> TAB
03</a>
<a id="v-pills-five-four-tab" data-bs-toggle="pill" href="#v-pills-five-four" role="tab"
aria-controls="v-pills-five-four" aria-selected="false"><i class="lni lni-dashboard"></i> TAB
04</a>
</div>
</div>
<div class="col-sm-8">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-five-one" role="tabpanel"
aria-labelledby="v-pills-five-one-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth.
<br /><br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel,
butcher voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="v-pills-five-two" role="tabpanel"
aria-labelledby="v-pills-five-two-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth.
<br /><br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel,
butcher voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="v-pills-five-three" role="tabpanel"
aria-labelledby="v-pills-five-three-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth.
<br /><br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel,
butcher voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="v-pills-five-four" role="tabpanel"
aria-labelledby="v-pills-five-four-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth.
<br /><br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel,
butcher voluptate nisi qui.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- row -->
</div>
<!-- tabs five -->
</div>/* tabs-five */
.tabs-five {
box-shadow: var(--shadow-4);
border-radius: 4px;
}
.tabs-five .nav {
height: 100%;
}
.tabs-five .nav a {
font-size: 16px;
line-height: 24px;
color: var(--dark-3);
font-weight: 700;
padding: 13px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
display: block;
position: relative;
text-align: center;
border-radius: 4px;
}
.tabs-five .nav a i {
margin-right: 5px;
font-size: 18px;
}
.tabs-five .nav a.active {
color: var(--white);
background: var(--primary);
}
.tabs-five .tab-content .tab-text {
padding: 15px;
}
.tabs-five .tab-content .tab-text .text {
color: var(--dark-3);
}Tab Style 6
<div class="tabs">
<div class="single-tabs tabs-six">
<div class="row no-gutters">
<div class="col-sm-4">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="active" id="v-pills-six-one-tab" data-bs-toggle="pill" href="#v-pills-six-one" role="tab"
aria-controls="v-pills-six-one" aria-selected="true"><i class="lni lni-vector"></i> TAB 01</a>
<a id="v-pills-six-two-tab" data-bs-toggle="pill" href="#v-pills-six-two" role="tab"
aria-controls="v-pills-six-two" aria-selected="false"><i class="lni lni-pizza"></i> TAB 02</a>
<a id="v-pills-six-three-tab" data-bs-toggle="pill" href="#v-pills-six-three" role="tab"
aria-controls="v-pills-six-three" aria-selected="false"><i class="lni lni-invention"></i> TAB
03</a>
<a id="v-pills-six-four-tab" data-bs-toggle="pill" href="#v-pills-six-four" role="tab"
aria-controls="v-pills-six-four" aria-selected="false"><i class="lni lni-dashboard"></i> TAB
04</a>
</div>
</div>
<div class="col-sm-8">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-six-one" role="tabpanel"
aria-labelledby="v-pills-six-one-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth.
<br /><br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel,
butcher voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="v-pills-six-two" role="tabpanel"
aria-labelledby="v-pills-six-two-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth.
<br /><br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel,
butcher voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="v-pills-six-three" role="tabpanel"
aria-labelledby="v-pills-six-three-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth.
<br /><br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel,
butcher voluptate nisi qui.
</p>
</div>
</div>
<div class="tab-pane fade" id="v-pills-six-four" role="tabpanel"
aria-labelledby="v-pills-six-four-tab">
<div class="tab-text">
<p class="text">
Raw denim you probably haven’t heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth.
<br /><br />
Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel,
butcher voluptate nisi qui.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- row -->
</div>
<!-- tabs six -->
</div>/* tabs-six */
.tabs-six {
border: 1px solid var(--gray-4);
}
.tabs-six .nav {
height: 100%;
position: relative;
}
.tabs-six .nav::before {
position: absolute;
content: "";
width: 4px;
height: 100%;
background-color: var(--gray-4);
top: 0;
right: 0;
}
.tabs-six .nav a {
font-size: 16px;
line-height: 24px;
color: var(--dark-3);
font-weight: 700;
padding: 13px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
display: block;
position: relative;
text-align: center;
}
.tabs-six .nav a i {
margin-right: 5px;
font-size: 18px;
}
.tabs-six .nav a.active {
color: var(--primary);
background: var(--primary-light);
}
.tabs-six .nav a.active::before {
position: absolute;
content: "";
width: 4px;
height: 100%;
background: var(--primary);
top: 0;
right: 0;
}
.tabs-six .tab-content .tab-text {
padding: 15px;
}
.tabs-six .tab-content .tab-text .text {
color: var(--dark-3);
}