Columns

Align items

alignItems prop is used to align columns vertically. It can be set to start, center or end.

Column

Align self

alignSelf prop is used to align columns vertically. It can be set to start, center or end.

Start

Center

End

Horizontal alignment

One of two columns

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

col="9"

col="4"
Since 9 + 4 = 13 > 12, this 4-column-wide element gets wrapped onto a new line as one contiguous unit.

col="6"
SSubsequent columns continue along the new line.

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with w-100 property wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple rows, but not every implementation method can account for this.
You may also apply this break at specific breakpoints.

col="6" colSm="3"

col="6" colSm="4"

Reordering

Use order prop to change the order of your content. Values are '1' | '2' | '3' | '4' | '5' | 'first' | 'last'.

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

Offsetting columns

colMd="4"

colMd="4" offsetMd="4"

colMd="3" offsetMd="3"

colMd="6" offsetMd="3"

colSm="5" colMd="6"

colSm="5" offsetSm="2" colMd="6" offsetMd="0"

colSm="6" colMd="5" colLg="6"

colSm="6" colMd="5" colLg="6" offsetMd="2" offsetLg="0"

Margins

colMd="4"

colMd="4" ms="auto"

colMd="3" msMd="auto"

col="auto" me="auto"

col="auto"

Standalone column classes

col="3": width of 25%

colSm="9" width of 75% above sm breakpoint