These display utilities are needed for flexbox

Apply these display utilities to an element to create a flexbox container. This transforms direct children elements into flex items. Apply additional flex properties shown below to further customize.

. d-flex

I’m a flexbox container!

. d-inline-flex

I’m an inline flexbox container!

Direction utilities

. d-flex . flex-column . flex-row-sm

Flex item 1
Flex item 2
Flex item 3

. d-flex . flex-column-reverse . flex-row-reverse-sm

Flex item 1
Flex item 2
Flex item 3

Justify utilities

. d-flex . justify-content-start

Flex item
Flex item
Flex item

. d-flex . justify-content-end

Flex item
Flex item
Flex item

. d-flex . justify-content-center

Flex item
Flex item
Flex item

. d-flex . justify-content-between

Flex item
Flex item
Flex item

. d-flex . justify-content-around

Flex item
Flex item
Flex item

Align utilities

. d-flex . align-items-start

Flex item
Flex item
Flex item

. d-flex . align-items-end

Flex item
Flex item
Flex item

. d-flex . align-items-center

Flex item
Flex item
Flex item

. d-flex . align-items-baseline

Flex item
Flex item
Flex item

. d-flex . align-items-stretch

Flex item
Flex item
Flex item

Align self utilities

. d-flex

Flex item
.align-self-start
Flex item

. d-flex

Flex item
.align-self-end
Flex item

. d-flex

Flex item
.align-self-center
Flex item

. d-flex

Flex item
.align-self-baseline
Flex item

. d-flex

Flex item
.align-self-stretch
Flex item

Combining utilities with auto margins

. d-flex . justify-content-end

.mr-auto
Flex item
Flex item

. d-flex . justify-content-start

Flex item
Flex item
.ml-auto

. d-flex . flex-column . align-items-start

.mb-auto
Flex item
Flex item

. d-flex . flex-column . align-items-end

Flex item
Flex item
.mt-auto

Wrapping utilities

. d-flex . flex-nowrap

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5

. d-flex . flex-wrap

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5

. d-flex . flex-wrap-reverse

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5

Order utilities

. d-flex

Flex item 1 (.order-last)
Flex item 2
Flex item 3 (.order-first)

Align content utilities

. d-flex . flex-wrap . align-content-start

Flex item
Flex item
Flex item
Flex item
Flex item

. d-flex . flex-wrap . align-content-end

Flex item
Flex item
Flex item
Flex item
Flex item

. d-flex . flex-wrap . align-content-center

Flex item
Flex item
Flex item
Flex item
Flex item

. d-flex . flex-wrap . align-content-between

Flex item
Flex item
Flex item
Flex item
Flex item

. d-flex . flex-wrap . align-content-around

Flex item
Flex item
Flex item
Flex item
Flex item

. d-flex . flex-wrap . align-content-stretch

Flex item
Flex item
Flex item
Flex item
Flex item

Grow and shrink

. d-inline-flex

In this example, this box has so much text in it that it would cause the other box to break lines on the dash. But that box cannot shrink b/c it has the.flex-none class.
.flex-none

. d-flex

.flex-1
Flex item
.flex-1