Documentation v1.1.1

Preview Purchase

Overview

Use responsive-friendly custom flex classes to build nested layouts with fixed and fluid columns. The classes are named using the format flex-{property}for xsand flex-{breakpoint}-{property}for sm, md, lg, xl, and xxl.
Where propertyis one of:
  • root- to define the root node of the flex layout(usually it's used when the layout is placed as a direct child of the body element in order to fully occupy the window height)
  • column-auto- to set a flex item with auto height
  • column-fluid- to set a flex item with fluid height
  • row-auto- to set a flex item with auto width
  • row-fluid- to set a flex item with fluid width
  • center- to set a flex item's content vertically and horizontally centered
  • start- to set a flex item's content alignments to start
  • end- to set a flex item's content alignments to end
Fixed Height
Fluid Height
Fixed Height
Fluid Width
Fixed Width
<div class="d-flex flex-row h-300px">
    <div class="d-flex flex-column flex-row-auto w-200px">
        <div class="d-flex flex-column-auto h-50px bg-primary">
            <span class="text-white">Fixed Height</span>
        </div>

        <div class="d-flex flex-column-fluid bg-success flex-center">
            <span class="text-white">Fluid Height</span>
        </div>
    </div>

    <div class="d-flex flex-column flex-row-fluid">
        <div class="d-flex flex-column-auto h-70px bg-info flex-center">
            <span class="text-white">Fixed Height</span>
        </div>

        <div class="d-flex flex-row flex-column-fluid">
            <div class="d-flex flex-row-fluid bg-dark flex-center">
                <span class="text-white">Fluid Width</span>
            </div>

            <div class="d-flex flex-row-auto w-200px bg-warning flex-center">
                <span class="text-white">Fixed Width</span>
            </div>
        </div>
    </div>
</div>
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
What's New ?
Latest features and improvements added with our users feedback in mind.
Buy now