Layout

Utilities for controlling layout.

Overflow

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;

Alignment

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>
</div>

Visibility

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;

Float

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"/>
	<p>Floating</p>
</div>

Clearfix

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;

Z-Index

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;

z-30

z-20

z-10

<div class="flex">
	<div class="z-30">z-30</div>
	<div class="z-20">z-20</div>
	<div class="z-10">z-10</div>
</div>