Flex

To create a flexbox container and transform direct children into flex items, use the d-flex class:

Inline Flex

To create an inline flexbox container, use the d-inline-flex class:

Horizontal Direction

Use .flex-row to make the flex items appear side by side (default):

Use .flex-row-reverse to right-align the direction:

Fill / Equal Widths

Use .flex-fill on flex items to force them into equal widths:

Example without .flex-fill:

Grow

Use .flex-grow-1 on a flex item to take up the rest of the space:

Example without .flex-grow-1:

Order

Change the visual order of a specific flex item(s) with the .order classes. Valid classes are from 0 to 12:

Auto Margins

Easily add auto margins to flex items with .mr-auto (push items to the right), or by using .ml-auto (push items to the left):

Align Items

Control the vertical alignment of single rows of flex items with the .align-content-* classes.

.align-items-start:

.align-items-end:

.align-items-center:

.align-items-baseline:

.align-items-stretch (default):

Align Self

Control the vertical alignment of a specific flex item with the .align-self-* classes.

.align-self-start:

.align-self-end:

.align-self-center:

.align-self-baseline:

.align-self-stretch (default):