Flex

Enable Flex Layout

Flexbox layouts are enabled by adding either the .d-flex or .d-inline-flex class to the parent element.

Direction

The layout direction is set with the flex direction utilities.

Justify Content

Use the justify-content utilities to change the alignment of child elements along the layout axis within a flex layout.

Default behavior:

• justify-content-start

Choose from:

• justify-content-start
• justify-content-end
• justify-content-center
• justify-content-between
• justify-content-around

Align Items

Use the align-items utilities to change the alignment of child elements along the non-layout direction axis within a flex layout.

Default behavior:

• align-items-stretch

Choose from:

• align-items-start
• align-items-end
• align-items-center
• align-items-baseline
• align-items-stretch

Align Self

Use the align-self utilities to change the alignment of an element along the non-layout direction axis within a flex layout.

Default behavior:

• align-self-stretch

Choose from:

• align-self-start
• align-self-end
• align-self-center
• align-self-baseline
• align-self-stretch

Auto Margins

Items can be pushed to using the .mr-auto and .ml-auto classes.

Wrap

Use the wrap utilities to change the wrapping behavior of child elements within a flex layout.

Default behavior:

• flex-nowrap

Choose from:

• flex-nowrap
• flex-wrap
• flex-wrap-reverse

Order

Use the order utilities to change the visual order of an element within a flex layout.

Choose from:

• order-1
• order-2
• order-3
• order-4
• order-5
• order-6
• order-7
• order-8
• order-9
• order-10
• order-11
• order-12

Align Content

Use the align-content utilities to change the alignment of child elements together along the non-layout direction axis within a flex layout.

Note flex-wrap: wrap; has been enforced with the .flex-wrap class.

Note This property has no effect on a single row of flex items.

Default behavior:

• align-content-start

Choose from:

• align-content-start
• align-content-end
• align-content-center
• align-content-between
• align-content-around
• align-content-stretch