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 xs and flex-{breakpoint}-{property}
for sm, md, lg, xl, and xxl.
Where
property is 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 heightcolumn-fluid- to set a flex item with fluid heightrow-auto- to set a flex item with auto widthrow-fluid- to set a flex item with fluid widthcenter- to set a flex item's content vertically and horizontally centeredstart- to set a flex item's content alignments to startend- 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>
2024©
Keenthemes
