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.
.edge-to-edge- Forces full width layout and collapses inner container padding.
Section Vertical Spacing [SPACING]
Optional: Adds top and bottom padding to section.
.sec-spacing-0ornone- 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-fluid- Full width section contrainer. Container runs from edge to egde of the viewport
.container-xxl- Standard width section contrainer. Fluid container until maximum container width is reached.
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 additional utility class to column.
Row Modifier [ROW_MODIFIER]
Optionally add additional utility class to row.
Template
<section class="grd [COLOR_THEME] [SPACING] [MODIFIER]">
<div class="[CONTAINER]">
<div class="row [ROW_JUSTIFY] [ROW_ALIGN] [GRID_GAP_X] [GRID_GAP_Y] [ROW_MODIFIER]">
<div class="[COL_WIDTH_MD] [COL_WIDTH_XL] [COL_MODIFIER]">
...
</div>
</div>
</div>
</section>
Basic Example
<section class="grd text-bg-secondary 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 text-center">Grid Cell 1</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="text-bg-light p-4 text-center">Grid Cell 2</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="text-bg-light p-4 text-center">Grid Cell 3</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="text-bg-light p-4 text-center">Grid Cell 4</div>
</div>
</div>
</div>
</section>
Flex Grid with Text and Accordion
<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-5">
<h2>Duis aute irure dolor in reprehenderit in voluptate</h2>
<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 class="col-md-6 col-xl-6">
<div class="accordion" id="exampleAcc">
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#exampleAcc0" aria-expanded="" aria-controls="exampleAcc0">
Accordion Item 1
</button>
</h3>
<div id="exampleAcc0" class="accordion-collapse collapse" 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="1" role="tablist">
</ul>
<div class="tab-content" id="Content">
</div>
</div>
</div>
</div>
</div>
</section>
Flex Grid Contained Layout
<section class="grd sec-spacing-lg">
<div class="container-xxl">
<div class="row gy-0 gx-0 rounded-4 overflow-hidden">
<div class="col-md-6 col-xl-6 d-flex order-md-last">
<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="img-fit"
>
</figure>
</div>
<div class="col-md-6 col-xl-6 p-5 text-bg-secondary d-flex align-items-center">
<div>
<h2>Lorem ipsum</h2>
<p>Saepe incidunt laboriosam minima officiis, consectetur, optio iure a esse beatae tempore dolor eum repellat quaerat harum quisquam expedita totam distinctio, ad rem id quibusdam! Officia quos nobis nemo veniam!</p>
<a href="#" class="btn btn-outline-dark">Button</a>
</div>
</div>
</div>
</div>
</section>
Full Width Flex Grid Text and Image (right)
<section class="grd text-bg-primary sec-spacing-false edge-to-edge">
<div class="container-fluid">
<div class="row gy-0 gx-0">
<div class="col-md-5 col-xl-6 d-flex order-md-last">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,
../../../../assets/img//fpo/fpo-8-5@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="img-fit"
>
</figure>
</div>
<div class="col-md-7 col-xl-6 p-5 px-xl-7 d-flex align-items-center">
<div>
<h2>Lorem ipsum</h2>
<p>Saepe incidunt laboriosam minima officiis, consectetur, optio iure a esse beatae tempore dolor eum repellat quaerat harum quisquam expedita totam distinctio, ad rem id quibusdam! Officia quos nobis nemo veniam!</p>
<a href="#" class="btn btn-outline-light">Button</a>
</div>
</div>
</div>
</div>
</section>
Full Width Flex Grid Text and Image (left)
<section class="grd text-bg-primary sec-spacing-false edge-to-edge">
<div class="container-fluid">
<div class="row gy-0 gx-0">
<div class="col-md-5 col-xl-6 d-flex">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,
../../../../assets/img//fpo/fpo-8-5@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="Image description"
class="img-fit"
>
</figure>
</div>
<div class="col-md-7 col-xl-6 p-5 px-xl-7 d-flex align-items-center">
<div>
<h2>Lorem ipsum</h2>
<p>Saepe incidunt laboriosam minima officiis, consectetur, optio iure a esse beatae tempore dolor eum repellat quaerat harum quisquam expedita totam distinctio, ad rem id quibusdam! Officia quos nobis nemo veniam!</p>
<a href="#" class="btn btn-outline-light">Button</a>
</div>
</div>
</div>
</div>
</section>
Flex Grid with Tabs
<section class="grd text-bg-light 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 fade show active" id="example0-tab-pane" role="tabpanel" aria-labelledby="example0-tab" tabindex="0">
<div class="tab-body">
<div class="row gy-3">
<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">CTA Button</a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="example1-tab-pane" role="tabpanel" aria-labelledby="example1-tab" tabindex="0">
<div class="tab-body">
<div class="row gy-3">
<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">CTA Button</a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="example2-tab-pane" role="tabpanel" aria-labelledby="example2-tab" tabindex="0">
<div class="tab-body">
<div class="row gy-3">
<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">CTA Button</a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="example3-tab-pane" role="tabpanel" aria-labelledby="example3-tab" tabindex="0">
<div class="tab-body">
<div class="row gy-3">
<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">CTA Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Flex Grid with Page Navigation
<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>