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>
</li>
<li class="nav-item" role="presentation">
<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 justify-content-start" 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 fade 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 fade" 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 fade" 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>
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 fade 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 fade" 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 fade" 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 fade" 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 fade 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 fade" 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 fade" 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>
Vertical Tabs Properties
Tab List Types [TAB_STYLE]
Changes the visual style of the tab list.
null- No style applied to tabs
.nav-pills- Pill style tabs
.nav-underline- Underline style tabs
Grid Alignment [GRID_ALIGNMENT]
Use align-items utilities to change the vertical alignment of the tabs and their content.
.align-items-start- Columns are packed flush to each other toward the start edge of the row in the appropriate axis.
.align-items-end- Columns are packed flush to each other toward the end edge of the row in the appropriate axis.
.align-items-center- Columns are vertically aligned to the center of the row.
Tab widths [TAB_WIDTH_MD] [TAB_WIDTH_XL]
Set the width of the tab column for desktop vieports.
.col-md-[1-12][COL_WIDTH_MD]Sets column width at the$mdbreakpoint.col-xl-[1-12][COL_WIDTH_XL]Sets column width at the$xlbreakpoint
Tab Spacing [TAB_SPACING]
Optionally add space around the tabs and content area.
.p-[0-6]- Adds additional padding to tab columns
Tab Ordering [TAB_ORDER]
Optionally place tabs after the tab content for larger breakpoint views.
.order-last- Will place tabs to the after the tab content.
Component Modifier [MODIFIER]
Optionally add an overall modifier class to the component.
Vertical Tabs Template
<div class="kb-tabs-y [MODIFIER]">
<div class="row g-0 row-flex-cols [GRID_ALIGNMENT]">
<!-- Tab column -->
<div class="[TAB_WIDTH_MD] [TAB_WIDTH_XL] [TAB_SPACING] [TAB_ORDER]">
<!-- Optional tab lead-in content area -->
<div class="leadin-content">
...
</div>
<!-- Vertical Tabs -->
<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>
<!-- Optional tab additional content area -->
<div class="additional-info">
...
</div>
</li>
<li class="nav-item" role="presentation">
<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>
<div class="additional-info">
...
</div>
</li>
</ul>
</div>
<!-- Tab content column -->
<div class="col-md [TAB_SPACING]">
<div class="tab-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>
</div>
</div>
Vertical Tabs
<div class="kb-tabs-y">
<div class="row g-0 row-flex-cols align-items-start">
<div class="col-md-4 col-xl-4 p-4">
<ul id="exampleVertTabs" class="nav nav-pills" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="exampleVertTabs0-tab" data-bs-toggle="tab" data-bs-target="#exampleVertTabs0-tab-pane" type="button" role="tab" aria-controls="exampleVertTabs0-tab-pane" aria-selected="true">Vertical Tab 1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="exampleVertTabs1-tab" data-bs-toggle="tab" data-bs-target="#exampleVertTabs1-tab-pane" type="button" role="tab" aria-controls="exampleVertTabs1-tab-pane" aria-selected="false">Vertical Tab 2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="exampleVertTabs2-tab" data-bs-toggle="tab" data-bs-target="#exampleVertTabs2-tab-pane" type="button" role="tab" aria-controls="exampleVertTabs2-tab-pane" aria-selected="false">Vertical Tab 3</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="exampleVertTabs3-tab" data-bs-toggle="tab" data-bs-target="#exampleVertTabs3-tab-pane" type="button" role="tab" aria-controls="exampleVertTabs3-tab-pane" aria-selected="false">Vertical Tab 4</button>
</li>
</ul>
</div>
<div class="col-md p-4">
<div class="tab-content">
<div class="tab-pane fade show active" id="exampleVertTabs0-tab-pane" role="tabpanel" aria-labelledby="exampleVertTabs0-tab" tabindex="0">
<span class="fa-regular fa-paper-plane fs-1 mb-3" aria-hidden="true"></span>
<h3>Tab 1 Content: <span class="d-block fs-4">Lorem ipsum dolor sit amet consectetur</span></h3>
<p>Quaerat accusamus blanditiis id laudantium reprehenderit inventore et, quo nulla culpa soluta maxime ipsum, quam repudiandae ducimus. Harum maiores minus quaerat sapiente velit rem.</p>
<p>Officiis dignissimos ratione eaque suscipit non repellendus consequuntur hic impedit corrupti, qui omnis neque facilis, temporibus a dolore cumque nostrum minima doloremque atque fugiat.</p>
</div>
<div class="tab-pane fade" id="exampleVertTabs1-tab-pane" role="tabpanel" aria-labelledby="exampleVertTabs1-tab" tabindex="0">
<span class="fa-regular fa-paper-plane fs-1 mb-3" aria-hidden="true"></span>
<h3>Tab 2 Content: <span class="d-block fs-4">Lorem ipsum dolor sit amet consectetur</span></h3>
<p>Quaerat accusamus blanditiis id laudantium reprehenderit inventore et, quo nulla culpa soluta maxime ipsum, quam repudiandae ducimus. Harum maiores minus quaerat sapiente velit rem.</p>
<p>Officiis dignissimos ratione eaque suscipit non repellendus consequuntur hic impedit corrupti, qui omnis neque facilis, temporibus a dolore cumque nostrum minima doloremque atque fugiat.</p>
</div>
<div class="tab-pane fade" id="exampleVertTabs2-tab-pane" role="tabpanel" aria-labelledby="exampleVertTabs2-tab" tabindex="0">
<span class="fa-regular fa-paper-plane fs-1 mb-3" aria-hidden="true"></span>
<h3>Tab 3 Content: <span class="d-block fs-4">Lorem ipsum dolor sit amet consectetur</span></h3>
<p>Quaerat accusamus blanditiis id laudantium reprehenderit inventore et, quo nulla culpa soluta maxime ipsum, quam repudiandae ducimus. Harum maiores minus quaerat sapiente velit rem.</p>
<p>Officiis dignissimos ratione eaque suscipit non repellendus consequuntur hic impedit corrupti, qui omnis neque facilis, temporibus a dolore cumque nostrum minima doloremque atque fugiat.</p>
</div>
<div class="tab-pane fade" id="exampleVertTabs3-tab-pane" role="tabpanel" aria-labelledby="exampleVertTabs3-tab" tabindex="0">
<span class="fa-regular fa-paper-plane fs-1 mb-3" aria-hidden="true"></span>
<h3>Tab 4 Content: <span class="d-block fs-4">Lorem ipsum dolor sit amet consectetur</span></h3>
<p>Quaerat accusamus blanditiis id laudantium reprehenderit inventore et, quo nulla culpa soluta maxime ipsum, quam repudiandae ducimus. Harum maiores minus quaerat sapiente velit rem.</p>
<p>Officiis dignissimos ratione eaque suscipit non repellendus consequuntur hic impedit corrupti, qui omnis neque facilis, temporibus a dolore cumque nostrum minima doloremque atque fugiat.</p>
</div>
</div>
</div>
</div>
</div>
Vertical Tabs - Additional tab content with images
<div class="kb-tabs-y">
<div class="row g-0 row-flex-cols align-items-center">
<div class="col-md-6 col-xl-6 p-2 order-last">
<div class="leadin-content">
<h2>Tabs Heading</h2>
</div>
<ul id="exampleVertTabs" class="nav" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="exampleVertTabs0-tab" data-bs-toggle="tab" data-bs-target="#exampleVertTabs0-tab-pane" type="button" role="tab" aria-controls="exampleVertTabs0-tab-pane" aria-selected="true">Vertical Tab 1</button>
<div class="additional-info">
<p>Additional Tab Content - Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam harum qui, iure voluptatibus culpa excepturi! Aliquid necessitatibus dolorum adipisci iusto.</p><p><a href="#" class="btn btn-outline-primary">CTA Button</a></p>
</div>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="exampleVertTabs1-tab" data-bs-toggle="tab" data-bs-target="#exampleVertTabs1-tab-pane" type="button" role="tab" aria-controls="exampleVertTabs1-tab-pane" aria-selected="false">Vertical Tab 2</button>
<div class="additional-info">
<p>Distinctio temporibus cum omnis illo, saepe dolorem repudiandae perferendis natus eligendi voluptatem quisquam, suscipit accusamus.</p> <p><a href="#" class="btn btn-outline-primary">CTA Button</a></p>
</div>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="exampleVertTabs2-tab" data-bs-toggle="tab" data-bs-target="#exampleVertTabs2-tab-pane" type="button" role="tab" aria-controls="exampleVertTabs2-tab-pane" aria-selected="false">Vertical Tab 3</button>
<div class="additional-info">
<p>Corrupti non, blanditiis voluptate expedita officiis totam, voluptas ab, laborum labore repellendus sunt accusamus quas.</p> <p><a href="#" class="btn btn-outline-primary">CTA Button</a></p>
</div>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="exampleVertTabs3-tab" data-bs-toggle="tab" data-bs-target="#exampleVertTabs3-tab-pane" type="button" role="tab" aria-controls="exampleVertTabs3-tab-pane" aria-selected="false">Vertical Tab 3</button>
<div class="additional-info">
<p>Delectus consectetur earum nobis consequatur, placeat ut vero porro et maxime nesciunt fugiat provident. Nobis!</p> <p><a href="#" class="btn btn-outline-primary">CTA Button</a></p>
</div>
</li>
</ul>
</div>
<div class="col-md p-2">
<div class="tab-content">
<div class="tab-pane fade show active" id="exampleVertTabs0-tab-pane" role="tabpanel" aria-labelledby="exampleVertTabs0-tab" tabindex="0">
<figure class="figure">
<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="Image description"
class="figure-img"
>
</figure>
</div>
<div class="tab-pane fade" id="exampleVertTabs1-tab-pane" role="tabpanel" aria-labelledby="exampleVertTabs1-tab" tabindex="0">
<figure class="figure">
<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="Image description"
class="figure-img"
>
</figure>
</div>
<div class="tab-pane fade" id="exampleVertTabs2-tab-pane" role="tabpanel" aria-labelledby="exampleVertTabs2-tab" tabindex="0">
<figure class="figure">
<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="Image description"
class="figure-img"
>
</figure>
</div>
<div class="tab-pane fade" id="exampleVertTabs3-tab-pane" role="tabpanel" aria-labelledby="exampleVertTabs3-tab" tabindex="0">
<figure class="figure">
<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="Image description"
class="figure-img"
>
</figure>
</div>
</div>
</div>
</div>
</div>