Flex

Enable flex behaviors

I'm a flexbox container!

I'm an inline flexbox container!

Responsive variations also exist: .d-md-flex, .d-xl-flex, etc…

Direction

Horizontal

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Vertical

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Responsive variations also exist: .flex-md-row, .flex-lg-column-reverse, etc…

Justify content

Flex item

Responsive variations also exist: .justify-content-md-end, .justify-content-lg-between, etc…

Align items

Flex item

Responsive variations also exist: .align-items-md-end, .align-items-lg-center, etc…

Align self

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Responsive variations also exist: .align-self-md-baseline, .align-self-lg-center, etc…

Fill

Flex item with a lot of content

Flex item

Responsive variations also exist: .flex-md-fill, .flex-xl-fill, etc…

Grow and shrink

Flex item

Third flex item

Use .flex-shrink-* utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with .flex-shrink-1 is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with .w-100.

Flex item

Responsive variations also exist: .flex-md-grow-0, .flex-lg-shrink-1, etc…

Auto margins

Flex item

With align-items

Flex item

Wrap

Flex item

Responsive variations also exist: .flex-md-wrap, .flex-lg-wrap-reverse, .flex-md-nowrap, etc…

Order

First flex item

Second flex item

Third flex item

Responsive variations also exist: .order-sm-1, .order-lg-2, etc…

Additionally there are also responsive .order-first and .order-last classes: .order-sm-first, .order-lg-last, etc…

Align content

Flex item

Responsive variations also exist: .align-content-sm-start, .align-content-lg-around, etc…