Flex Grid
Configurable row and column layout component.
Component Properties
Text / Background Color Theme [COLOR_THEME]
Using the Sass color-contrast() function, the text color is automatically determined based on the defined $color-contrast-dark and $color-contrast-light text color variables for the contrasting color for a particular background-color. Available classes are:
Section Modifier [MODIFIER]
Optionally add an overall modifier class to the component.
Section Vertical Spacing [SPACING]
Optional: Adds top and bottom padding to section.
none- No spacing applied to element
.sec-spacing- Adds top and bottom spacing to section
.sec-spacing-sm- Adds a small amount top and bottom spacing to section
.sec-spacing-lg- Adds a large amount top and bottom spacing to section
Container Modifier [CONTAINER]
Use .container-fluid for a full width container, spanning the entire width of the viewport
.container- Standard width section contrainer. Container width snaps to width at breakpoints.
.container-xxl- Standard width section contrainer. Container has fluid until it reaches it's maximum width
.container-fluid- Full width section contrainer. Container runs from edge to egde of the viewport
Row Justification [ROW_JUSTIFY]
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main x-axis.
.justify-content-start- Pack columns from the left
.justify-content-end- Pack columns from the right
.justify-content-center- Pack columns around the center.
.justify-content-between- Distribute columns evenly. The first item is flush with the start, the last is flush with the end.
.justify-content-around- Distribute columns evenly. Start and end gaps are half the size of the space between each item.
.justify-content-evenly- Distribute columns evenly. Start, in-between, and end gaps have equal sizes.
Row Alignment [ROW_ALIGN]
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross y-axis.
.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.
.align-items-stretch- All Columns are stretched vertically to match the tallest column in the row.
Column widths [COL_WIDTH_MD] [COL_WIDTH_XL]
Set the width of the content 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.col-break- Force next columns to break to new line through all breakpoints
Grid Spacing [GRID_GAP_X] [GRID_GAP_Y]
Gutters are the padding between your columns, used to responsively space and align content in the grid system.
none- Grid follows default spacing.
.gx-[0-5][GRID_GAP_X]Provides horizontal gap between columns..gy-[0-5][GRID_GAP_Y]Provides vertical gap between columns.
Column Modifier [COL_MODIFIER]
Optionally add a modifier class to the column.
Template
<section class="grd [COLOR_THEME] [SPACING] [MODIFIER]">
<div class="[CONTAINER]">
<div class="row [ROW_JUSTIFY] [ROW_ALIGN] [GRID_GAP_X] [GRID_GAP_Y]">
<div class="[COL_WIDTH_MD] [COL_WIDTH_XL] [COL_MODIFIER]">
...
</div>
</div>
</div>
</section>
Example
<section class="grd text-bg-accent2 sec-spacing">
<div class="container-xxl">
<div class="row gy-3 gx-3">
<div class="col-md-6 col-xl-3">
<div class="text-bg-light p-4"></div>
</div>
<div class="col-md-6 col-xl-3">
<div class="text-bg-light p-4"></div>
</div>
<div class="col-md-6 col-xl-3">
<div class="text-bg-light p-4"></div>
</div>
<div class="col-md-6 col-xl-3">
<div class="text-bg-light p-4"></div>
</div>
</div>
</div>
</section>
Example with Accordion Component
<section class="grd sec-spacing">
<div class="container-xxl">
<div class="row gy-4 gx-3 justify-content-between">
<div class="col-md-6 col-xl-6">
<div class="accordion" id="exampleAcc">
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#exampleAcc0" aria-expanded="true" aria-controls="exampleAcc0">
Accordion Item 1
</button>
</h3>
<div id="exampleAcc0" class="accordion-collapse collapse show" data-bs-parent="#exampleAcc">
<div class="accordion-body">
<p class="h5">Accordion Item #1 content area</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis, laborum architecto enim reprehenderit veniam, labore corrupti id iste animi ipsa repudiandae. Obcaecati, eius fugit inventore sunt repudiandae corporis! Doloribus.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#exampleAcc1" aria-expanded="false" aria-controls="exampleAcc1">
Accordion Item 2
</button>
</h3>
<div id="exampleAcc1" class="accordion-collapse collapse" data-bs-parent="#exampleAcc">
<div class="accordion-body">
<p class="h5">Accordion Item #2 content area</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis, laborum architecto enim reprehenderit veniam, labore corrupti id iste animi ipsa repudiandae. Obcaecati, eius fugit inventore sunt repudiandae corporis! Doloribus.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#exampleAcc2" aria-expanded="false" aria-controls="exampleAcc2">
Accordion Item 3
</button>
</h3>
<div id="exampleAcc2" class="accordion-collapse collapse" data-bs-parent="#exampleAcc">
<div class="accordion-body">
<p class="h5">Accordion Item #3 content area</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis, laborum architecto enim reprehenderit veniam, labore corrupti id iste animi ipsa repudiandae. Obcaecati, eius fugit inventore sunt repudiandae corporis! Doloribus.</p>
</div>
</div>
</div>
</div>
<div class="kb-tabs-x">
<ul class="nav nav-" id="0" role="tablist">
</ul>
<div class="tab-content" id="Content">
</div>
</div>
</div>
<div class="col-md-6 col-xl-5">
<h3>Facere officiis voluptatibus placeat cupiditate accusantium itaque repellendus.</h3>
<p>Quia aliquam temporibus vero dicta. Veritatis, dolorem? Praesentium dolor odit, officiis reiciendis libero error distinctio dolorem laborum quae ducimus eos delectus, sint, nesciunt dolore!</p>
<p>Iusto iure dignissimos assumenda ullam est ipsum, blanditiis accusamus dolores, minima iste omnis commodi repudiandae molestiae facere dolor aliquid necessitatibus quos. Molestias, unde magnam.</p>
</div>
</div>
</div>
</section>
Example with Tab Component
<section class="grd text-bg-accent1 sec-spacing">
<div class="container-xxl">
<div class="row gy-3 gx-3">
<div class="col-md-12 col-xl-12">
<div class="kb-tabs-x bg-light shadow">
<ul class="nav nav-tabs nav-fill" id="example0" 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">Package 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">Package 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">Package 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">Package 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>
</div>
</div>
</div>
</section>
Example with Page Navigation Component
<section class="grd text-bg-accent1 sec-spacing-sm">
<div class="container-xxl">
<div class="row">
<div class="col-md-12 col-xl-12">
<nav class="nav nav-underline justify-content-center" aria-label="Page">
<a href="#" class="nav-link active" aria-current="page">Nav Item 1</a>
<a href="#" class="nav-link">Nav Item 2</a>
<a href="#" class="nav-link">Nav Item 3</a>
<a href="#" class="nav-link">Nav Item 4</a>
<a href="#" class="nav-link">Nav Item 5</a>
</nav>
</div>
</div>
</div>
</section>
Heading and text
<section class="grd sec-spacing-lg">
<div class="container-xxl">
<div class="row gy-4 gx-3 justify-content-between align-items-center">
<div class="col-md-12 col-xl-12 text-center">
<h2>Minus magnam reprehenderit enim dolore eius</h2>
</div>
<div class="col-md-6 col-xl-6">
<img
srcset="../../../../assets/img//fpo/fpo-5-4@xs.jpg 480w,
../../../../assets/img//fpo/fpo-5-4@md.jpg 720w,
../../../../assets/img//fpo/fpo-5-4@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-5-4@md.jpg"
alt="Card Image"
class="img-fit obj-pos-cc"
>
</div>
<div class="col-md-6 col-xl-5">
<h3>Expedita ipsa vitae inventore recusandae placeat?</h3>
<P>Atque aliquid, repellat commodi ratione esse excepturi illum, voluptatibus id labore totam nihil blanditiis.</P>
<P>Numquam odio, consequatur, eum iste optio mollitia suscipit aspernatur ipsa ex tempora molestias odit.</P>
</div>
</div>
</div>
</section>
Banner CTA
<section class="grd text-bg-secondary sec-spacing-sm">
<div class="container-xxl">
<div class="row gy-4 gx-3 align-items-center">
<div class="col-md-6 col-xl-8">
<h3>Aliquam ipsum ab repellendus qui facilis facere quidem</h3>
<p class="lead">Sint reprehenderit fugiat vel eum! Molestias, tempore hic.</p>
</div>
<div class="col-md-6 col-xl-4">
<a href="#" class="btn btn-primary btn-lg w-100">CTA Button</a>
</div>
</div>
</div>
</section>
Image, copy and link list
<section class="grd sec-spacing">
<div class="container-xxl">
<div class="row gy-4 gx-4 justify-content-between align-items-center">
<div class="col-md-6 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-6 col-xl-5">
<h2>Cupiditate unde aliquid minima explicabo nulla porro</h2>
<p>Nihil inventore aliquid eos sit. Facere maiores impedit dolor corrupti illum voluptas atque architecto veritatis, soluta, voluptatibus aspernatur?</p>
<ul class="list-links">
<li>
<a href="#">Lorem ipsum dolor sit amet</a></li>
<li>
<a href="#">Tenetur dolore error asperiores fugiat</a></li>
<li>
<a href="#"><i class="fa-solid fa-link"></i>Itaque iure velit porro quam</a></li>
<li>
<a href="#"><i class="fa-solid fa-angle-right"></i>Obcaecati numquam earum quis animi</a></li>
<li>
<a href="#"><i class="fa-solid fa-caret-right"></i>Ipsa ullam corporis aliquid sint</a></li>
</ul>
</div>
</div>
</div>
</section>
Grid Break
<section class="grd text-bg-accent1 sec-spacing-lg">
<div class="container-xxl">
<div class="row gy-4 gx-3 align-items-center">
<div class="col-md-12 col-xl-12 text-center">
<h3>Inserting Column Breaks between columns to prevent wrapping</h3>
</div>
<div class="col-md-6 col-xl-6">
<h4>(Column width: 6) Nam culpa minus repellat obcaecati omnis voluptatem vero magnam amet</h4>
<p>Laudantium a perspiciatis eos dolorem amet, odit harum enim quis, numquam quam, provident error vitae!</p>
</div>
<div class="col-break"></div>
<div class="col-md-5 col-xl-5">
<h4>(Column width: 5) Nam culpa minus repellat obcaecati omnis voluptatem vero magnam amet</h4>
<p>Laudantium a perspiciatis eos dolorem amet, odit harum enim quis, numquam quam, provident error vitae!</p>
</div>
<div class="col-break"></div>
<div class="col-md-4 col-xl-4">
<h4>(Column width: 4) Nam culpa minus repellat obcaecati omnis voluptatem vero magnam amet</h4>
<p>Laudantium a perspiciatis eos dolorem amet, odit harum enim quis, numquam quam, provident error vitae!</p>
</div>
<div class="col-break"></div>
<div class="col-md-3 col-xl-3">
<h4>(Column width: 3) Nam culpa minus repellat obcaecati omnis voluptatem vero magnam amet</h4>
<p>Laudantium a perspiciatis eos dolorem amet, odit harum enim quis, numquam quam, provident error vitae!</p>
</div>
</div>
</div>
</section>
Packages and Specials
<section class="grd text-bg-primary sec-spacing row-flex-cols">
<div class="container-xxl">
<div class="row gy-3 gx-4 justify-content-center">
<div class="col-md-12 col-xl-10 text-center">
<h2>Packages & Specials</h2>
<p>Illo ipsa, tenetur maxime at impedit repellat sit incidunt quam molestiae distinctio reiciendis labore aliquid. Reiciendis quos, amet ea, modi provident ab odio mollitia quibusdam, unde iste maiores ut ipsa.</p>
</div>
<div class="col-md-6 col-xl-6 d-flex">
<div class="card dyn-crd-psv">
<img
srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
alt="Image description"
class="card-img-top img-ar16-9">
<div class="card-body">
<h3 class="card-title">Unde maxime velit quia</h3>
<p class="card-text">Earum ullam voluptatum, in quas necessitatibus sed laudantium excepturi deserunt libero, nisi quibusdam exercitationem hic vitae. Delectus animi blanditiis amet eos voluptatum.</p>
<ul><li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id possimus expedita dolorem, corrupti sunt animi itaque!</li><li>Vel dolore consectetur sequi alias sapiente esse.</li><li>Aliquam cumque aperiam sunt officia iure, adipisci porro provident harum tenetur.</li><li>Veritatis vitae iste assumenda repellendus maxime recusandae aliquid.</li><li>Aperiam pariatur laboriosam facilis dolorem.</li></ul>
<a href="#" class="btn btn-outline-primary btn-sm stretched-link">Book Now</a>
</div>
</div>
</div>
<div class="col-md-6 col-xl-6 d-flex">
<div class="card dyn-crd-psv">
<img
srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
alt="Image description"
class="card-img-top img-ar16-9">
<div class="card-body">
<h3 class="card-title">Risus sed vulputate</h3>
<p class="card-text">Porttitor rhoncus dolor purus non enim praesent elementum. Dictum varius duis at consectetur lorem donec massa.</p>
<ul><li>Vel dolore consectetur sequi alias sapiente esse.</li><li>Aliquam cumque aperiam sunt officia iure, adipisci porro provident harum tenetur.</li><li>Veritatis vitae iste assumenda repellendus maxime recusandae aliquid.</li><li>Aperiam pariatur laboriosam facilis dolorem.</li></ul>
<a href="#" class="btn btn-outline-primary btn-sm stretched-link">Book Now</a>
</div>
</div>
</div>
</div>
</div>
</section>