Tab Component
Create tabbable panes of local content.
Horizontal Tabs Properties
Tab List Types [TAB_STYLE]
Changes the visual style of the tab list.
.nav-tabs- Traditional tab stye
.nav-pills- Pill style tabs
.nav-underline- Underline style tabs
Tab List Alignment [TAB_ALIGN]
Changes the visual style of the tab list.
.justify-content-start- Tabs aligned to left
.justify-content-center- Tabs aligned center
.justify-content-end- Tabs aligned to right
.nav-fill- Proportionately fill all available space with nav items
Component Modifier [MODIFIER]
Optionally add an overall modifier class to the component.
Horizontal Tabs Template
<div class="kb-tabs-x [MODIFIER]">
<ul id="[TAB_ID]" class="nav [TAB_STYLE] [TAB_ALIGN]" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="[TAB_ID]0-tab" data-bs-toggle="tab" data-bs-target="#[TAB_ID]0-tab-pane" type="button" role="tab" aria-controls="[TAB_ID]0-tab-pane" aria-selected="true"> [TAB_ITEM_TEXT] </button>
<button class="nav-link" id="[TAB_ID]1-tab" data-bs-toggle="tab" data-bs-target="#[TAB_ID]1-tab-pane" type="button" role="tab" aria-controls="[TAB_ID]1-tab-pane" aria-selected="false"> [TAB_ITEM_TEXT] </button>
</li>
</ul>
<div class="tab-content" id="[TAB_ID]Content">
<div class="tab-pane fade show active" id="[TAB_ID]0-tab-pane" role="tabpanel" aria-labelledby="[TAB_ID]0-tab" tabindex="0">
...
</div>
<div class="tab-pane fade" id="[TAB_ID]1-tab-pane" role="tabpanel" aria-labelledby="[TAB_ID]1-tab" tabindex="0">
...
</div>
</div>
</div>
Tabs
<div class="kb-tabs-x">
<ul class="nav nav-tabs nav-fill" id="example" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="example0-tab" data-bs-toggle="tab" data-bs-target="#example0-tab-pane" type="button" role="tab" aria-controls="example0-tab-pane" aria-selected="true">Tab 1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="example1-tab" data-bs-toggle="tab" data-bs-target="#example1-tab-pane" type="button" role="tab" aria-controls="example1-tab-pane" aria-selected="false">Tab 2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="example2-tab" data-bs-toggle="tab" data-bs-target="#example2-tab-pane" type="button" role="tab" aria-controls="example2-tab-pane" aria-selected="false">Tab 3</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="example3-tab" data-bs-toggle="tab" data-bs-target="#example3-tab-pane" type="button" role="tab" aria-controls="example3-tab-pane" aria-selected="false">Tab 4</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="example4-tab" data-bs-toggle="tab" data-bs-target="#example4-tab-pane" type="button" role="tab" aria-controls="example4-tab-pane" aria-selected="false">Tab 5</button>
</li>
</ul>
<div class="tab-content" id="exampleContent">
<div class="tab-pane show active" id="example0-tab-pane" role="tabpanel" aria-labelledby="example0-tab" tabindex="0">
<div class="bg-white p-3 p-xl-5 shadow">
<div class="row gy-3 align-items-center">
<div class="col-md-5 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img//fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</div>
<div class="col-md-7 col-xl-6">
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam voluptas, pariatur, praesentium aspernatur magnam ullam in laborum culpa dolor similique velit aliquam repudiandae aut eveniet cumque.</p>
<ul class="mb-5">
<li>Dicta quas esse minus est hic!</li>
<li>Ad sed aliquam suscipit nostrum sint?</li>
<li>Enim repellendus delectus pariatur neque iure.</li>
</ul>
<a href="#" class="btn btn-outline-primary">Book Now</a>
</div>
</div>
</div>
</div>
<div class="tab-pane " id="example1-tab-pane" role="tabpanel" aria-labelledby="example1-tab" tabindex="0">
<div class="bg-white p-3 p-xl-5 shadow">
<div class="row gy-3 align-items-center">
<div class="col-md-5 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img//fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</div>
<div class="col-md-7 col-xl-6">
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam voluptas, pariatur, praesentium aspernatur magnam ullam in laborum culpa dolor similique velit aliquam repudiandae aut eveniet cumque.</p>
<ul class="mb-5">
<li>Dicta quas esse minus est hic!</li>
<li>Ad sed aliquam suscipit nostrum sint?</li>
<li>Enim repellendus delectus pariatur neque iure.</li>
</ul>
<a href="#" class="btn btn-outline-primary">Book Now</a>
</div>
</div>
</div>
</div>
<div class="tab-pane " id="example2-tab-pane" role="tabpanel" aria-labelledby="example2-tab" tabindex="0">
<div class="bg-white p-3 p-xl-5 shadow">
<div class="row gy-3 align-items-center">
<div class="col-md-5 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img//fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</div>
<div class="col-md-7 col-xl-6">
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam voluptas, pariatur, praesentium aspernatur magnam ullam in laborum culpa dolor similique velit aliquam repudiandae aut eveniet cumque.</p>
<ul class="mb-5">
<li>Dicta quas esse minus est hic!</li>
<li>Ad sed aliquam suscipit nostrum sint?</li>
<li>Enim repellendus delectus pariatur neque iure.</li>
</ul>
<a href="#" class="btn btn-outline-primary">Book Now</a>
</div>
</div>
</div>
</div>
<div class="tab-pane " id="example3-tab-pane" role="tabpanel" aria-labelledby="example3-tab" tabindex="0">
<div class="bg-white p-3 p-xl-5 shadow">
<div class="row gy-3 align-items-center">
<div class="col-md-5 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img//fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</div>
<div class="col-md-7 col-xl-6">
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam voluptas, pariatur, praesentium aspernatur magnam ullam in laborum culpa dolor similique velit aliquam repudiandae aut eveniet cumque.</p>
<ul class="mb-5">
<li>Dicta quas esse minus est hic!</li>
<li>Ad sed aliquam suscipit nostrum sint?</li>
<li>Enim repellendus delectus pariatur neque iure.</li>
</ul>
<a href="#" class="btn btn-outline-primary">Book Now</a>
</div>
</div>
</div>
</div>
<div class="tab-pane " id="example4-tab-pane" role="tabpanel" aria-labelledby="example4-tab" tabindex="0">
<div class="bg-white p-3 p-xl-5 shadow">
<div class="row gy-3 align-items-center">
<div class="col-md-5 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img//fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</div>
<div class="col-md-7 col-xl-6">
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam voluptas, pariatur, praesentium aspernatur magnam ullam in laborum culpa dolor similique velit aliquam repudiandae aut eveniet cumque.</p>
<ul class="mb-5">
<li>Dicta quas esse minus est hic!</li>
<li>Ad sed aliquam suscipit nostrum sint?</li>
<li>Enim repellendus delectus pariatur neque iure.</li>
</ul>
<a href="#" class="btn btn-outline-primary">Book Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
Pill Tabs - Tablist Fill
<div class="kb-tabs-x">
<ul class="nav nav-pills nav-fill" id="example" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="example0-tab" data-bs-toggle="tab" data-bs-target="#example0-tab-pane" type="button" role="tab" aria-controls="example0-tab-pane" aria-selected="true">Tab 1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="example1-tab" data-bs-toggle="tab" data-bs-target="#example1-tab-pane" type="button" role="tab" aria-controls="example1-tab-pane" aria-selected="false">Tab 2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="example2-tab" data-bs-toggle="tab" data-bs-target="#example2-tab-pane" type="button" role="tab" aria-controls="example2-tab-pane" aria-selected="false">Tab 3</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="example3-tab" data-bs-toggle="tab" data-bs-target="#example3-tab-pane" type="button" role="tab" aria-controls="example3-tab-pane" aria-selected="false">Tab 4</button>
</li>
</ul>
<div class="tab-content" id="exampleContent">
<div class="tab-pane show active" id="example0-tab-pane" role="tabpanel" aria-labelledby="example0-tab" tabindex="0">
<div class="bg-white p-3 p-xl-5 shadow">
<div class="row gy-3 align-items-center">
<div class="col-md-5 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img//fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</div>
<div class="col-md-7 col-xl-6">
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam voluptas, pariatur, praesentium aspernatur magnam ullam in laborum culpa dolor similique velit aliquam repudiandae aut eveniet cumque.</p>
<ul class="mb-5">
<li>Dicta quas esse minus est hic!</li>
<li>Ad sed aliquam suscipit nostrum sint?</li>
<li>Enim repellendus delectus pariatur neque iure.</li>
</ul>
<a href="#" class="btn btn-outline-primary">Book Now</a>
</div>
</div>
</div>
</div>
<div class="tab-pane " id="example1-tab-pane" role="tabpanel" aria-labelledby="example1-tab" tabindex="0">
<div class="bg-white p-3 p-xl-5 shadow">
<div class="row gy-3 align-items-center">
<div class="col-md-5 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img//fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</div>
<div class="col-md-7 col-xl-6">
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam voluptas, pariatur, praesentium aspernatur magnam ullam in laborum culpa dolor similique velit aliquam repudiandae aut eveniet cumque.</p>
<ul class="mb-5">
<li>Dicta quas esse minus est hic!</li>
<li>Ad sed aliquam suscipit nostrum sint?</li>
<li>Enim repellendus delectus pariatur neque iure.</li>
</ul>
<a href="#" class="btn btn-outline-primary">Book Now</a>
</div>
</div>
</div>
</div>
<div class="tab-pane " id="example2-tab-pane" role="tabpanel" aria-labelledby="example2-tab" tabindex="0">
<div class="bg-white p-3 p-xl-5 shadow">
<div class="row gy-3 align-items-center">
<div class="col-md-5 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img//fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</div>
<div class="col-md-7 col-xl-6">
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam voluptas, pariatur, praesentium aspernatur magnam ullam in laborum culpa dolor similique velit aliquam repudiandae aut eveniet cumque.</p>
<ul class="mb-5">
<li>Dicta quas esse minus est hic!</li>
<li>Ad sed aliquam suscipit nostrum sint?</li>
<li>Enim repellendus delectus pariatur neque iure.</li>
</ul>
<a href="#" class="btn btn-outline-primary">Book Now</a>
</div>
</div>
</div>
</div>
<div class="tab-pane " id="example3-tab-pane" role="tabpanel" aria-labelledby="example3-tab" tabindex="0">
<div class="bg-white p-3 p-xl-5 shadow">
<div class="row gy-3 align-items-center">
<div class="col-md-5 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img//fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</div>
<div class="col-md-7 col-xl-6">
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam voluptas, pariatur, praesentium aspernatur magnam ullam in laborum culpa dolor similique velit aliquam repudiandae aut eveniet cumque.</p>
<ul class="mb-5">
<li>Dicta quas esse minus est hic!</li>
<li>Ad sed aliquam suscipit nostrum sint?</li>
<li>Enim repellendus delectus pariatur neque iure.</li>
</ul>
<a href="#" class="btn btn-outline-primary">Book Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
Underline Tabs - Tablist Center Aligned
<div class="kb-tabs-x">
<ul class="nav nav-underline justify-content-center" id="example" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="example0-tab" data-bs-toggle="tab" data-bs-target="#example0-tab-pane" type="button" role="tab" aria-controls="example0-tab-pane" aria-selected="true">Tab 1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="example1-tab" data-bs-toggle="tab" data-bs-target="#example1-tab-pane" type="button" role="tab" aria-controls="example1-tab-pane" aria-selected="false">Tab 2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="example2-tab" data-bs-toggle="tab" data-bs-target="#example2-tab-pane" type="button" role="tab" aria-controls="example2-tab-pane" aria-selected="false">Tab 3</button>
</li>
</ul>
<div class="tab-content" id="exampleContent">
<div class="tab-pane show active" id="example0-tab-pane" role="tabpanel" aria-labelledby="example0-tab" tabindex="0">
<div class="bg-white p-3 p-xl-5 shadow">
<div class="row gy-3 align-items-center">
<div class="col-md-5 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img//fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</div>
<div class="col-md-7 col-xl-6">
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam voluptas, pariatur, praesentium aspernatur magnam ullam in laborum culpa dolor similique velit aliquam repudiandae aut eveniet cumque.</p>
<ul class="mb-5">
<li>Dicta quas esse minus est hic!</li>
<li>Ad sed aliquam suscipit nostrum sint?</li>
<li>Enim repellendus delectus pariatur neque iure.</li>
</ul>
<a href="#" class="btn btn-outline-primary">Book Now</a>
</div>
</div>
</div>
</div>
<div class="tab-pane " id="example1-tab-pane" role="tabpanel" aria-labelledby="example1-tab" tabindex="0">
<div class="bg-white p-3 p-xl-5 shadow">
<div class="row gy-3 align-items-center">
<div class="col-md-5 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img//fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</div>
<div class="col-md-7 col-xl-6">
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam voluptas, pariatur, praesentium aspernatur magnam ullam in laborum culpa dolor similique velit aliquam repudiandae aut eveniet cumque.</p>
<ul class="mb-5">
<li>Dicta quas esse minus est hic!</li>
<li>Ad sed aliquam suscipit nostrum sint?</li>
<li>Enim repellendus delectus pariatur neque iure.</li>
</ul>
<a href="#" class="btn btn-outline-primary">Book Now</a>
</div>
</div>
</div>
</div>
<div class="tab-pane " id="example2-tab-pane" role="tabpanel" aria-labelledby="example2-tab" tabindex="0">
<div class="bg-white p-3 p-xl-5 shadow">
<div class="row gy-3 align-items-center">
<div class="col-md-5 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img//fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img//fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-1-1@md.jpg"
alt="Card Image"
class="img-fluid img-ar1-1"
>
</div>
<div class="col-md-7 col-xl-6">
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam voluptas, pariatur, praesentium aspernatur magnam ullam in laborum culpa dolor similique velit aliquam repudiandae aut eveniet cumque.</p>
<ul class="mb-5">
<li>Dicta quas esse minus est hic!</li>
<li>Ad sed aliquam suscipit nostrum sint?</li>
<li>Enim repellendus delectus pariatur neque iure.</li>
</ul>
<a href="#" class="btn btn-outline-primary">Book Now</a>
</div>
</div>
</div>
</div>
</div>
</div>