Utilities for controlling layout.


Use overflow-{property} for setting element overflow behaviour.

For responsive variant use overflow-{breakpoint}-{property} like overflow-md-hidden.

Class Properties
overflow-auto overflow: auto;
overflow-hidden overflow: hidden;
overflow-clip overflow: clip;
overflow-visible overflow: visible;
overflow-scroll overflow: scroll;
overflow-x-auto overflow-x: auto;
overflow-y-auto overflow-y: auto;
overflow-x-hidden overflow-x: hidden;
overflow-y-hidden overflow-y: hidden;
overflow-x-clip overflow-x: clip;
overflow-y-clip overflow-y: clip;
overflow-x-visible overflow-x: visible;
overflow-y-visible overflow-y: visible;
overflow-x-scroll overflow-x: scroll;
overflow-y-scroll overflow-y: scroll;

Object fit

Use object-{property} for fitting an element inside container.

For responsive variant use object-{breakpoint}-{property} like object-sm-fill.

Class Properties
object-contain object-fit: contain;
object-cover object-fit: cover;
object-fill object-fit: fill;
object-none object-fit: none;
object-scale-down object-fit: scale-down;


Use align-{property} to change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

For responsive variant use align-{breakpoint}-{property} like align-md-baseline.

Class Properties
align-baseline vertical-align: baseline;
align-top vertical-align: top;
align-middle vertical-align: middle;
align-bottom vertical-align: bottom;
align-text-top vertical-align: text-top;
align-text-bottom vertical-align: text-bottom;
align-sub vertical-align: sub;
align-super vertical-align: sup;
<div class="box">
	<span class="align-top width-4 height-4 bg-secondary">hi</span>
	<span class="align-bottom width-6 height-6 bg-secondary">hi</span>


Use {visible | hidden | collapse} to control visibilty of an element.
For responsive variant use visible-{breakpoint} like hidden-sm.

Class Properties
visible visibility: visible;
hidden visibility: hidden;
collapse visibility: collapse;


Use float-{property} to place an element on the left or right.
For responsive variant use float-{breakpoint}-{property} like float-sm-left.

Class Properties
float-left float: left;
float-right float: right;
float-none float: none;

Floating may refer to a type of dental work performed on horse teeth, use of an isolation tank, the guitar-playing technique where chords are sustained rather than scratched

<div class="p-4">
	<img class="float-left" src="/images/profile.png" alt="profile"/>


Use clearfix to clear the floats.

Table Layout

Use table-{property} to control table layout algorithm.
For responsive variant use table-{breakpoint}-{property} like table-sm-auto.

Class Properties
table-auto table-layout: auto;
table-fixed table-layout: fixed;

Border Collapse

Use border-{property}either collapse or separate table borders.
For responsive variant use border-{breakpoint}-{property} like boder-sm-collapse.

Class Properties
border-collapse border-collapse: collapse;
border-separate border-collapse: separate;


Use border-{property}to control z-index of an element.
For responsive variant use z-{breakpoint}-{property} like z-sm-10.

Class Properties
z-auto z-index: auto;
z-0 z-index: 0;
z-10 z-index: 10;
z-20 z-index: 20;
z-30 z-index: 30;
z-40 z-index: 40;
z-50 z-index: 50;
z-60 z-index: 60;
z-70 z-index: 70;
z-80 z-index: 70;
z-90 z-index: 90;
z-100 z-index: 100;

Fixed Z-Index

There are few predefined z-indices to avoid conflicts.

Class Properties
z-tooltip z-index: 1500;
z-toast z-index: 1400;
z-drawer z-index: 1350;
z-drawer-backdrop z-index: 1300;
z-modal z-index: 1250;
z-modal-backdrop z-index: 1200;
z-navbar z-index: 1100;
<div class="flex">
	<div class="z-30">z-30</div>
	<div class="z-20">z-20</div>
	<div class="z-10">z-10</div>