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 $md breakpoint
.col-xl-[1-12]
[COL_WIDTH_XL] Sets column width at the $xl breakpoint
.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

View in new window
<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

View in new window
View in new window for full preview
<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

View in new window
View in new window for full preview
<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

View in new window
<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

View in new window
<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

View in new window
<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

View in new window
<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

View in new window
View in new window for full preview
<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

View in new window
View in new window for full preview
<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 &amp; 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>