Flex classes

You can also customize flex utilities to apply based upon various breakpoints.

d-flex
d-inline-flex

d-sm-flex
d-sm-inline-flex

d-md-flex
d-md-inline-flex

d-lg-flex
d-lg-inline-flex

d-xl-flex
d-xl-inline-flex

Flex direction

By default, d-flex applies flex-direction: row and can generally be omitted. However, there may be situations where you need to explicitly define it.

flex-row
flex-row-reverse
flex-column
flex-column-reverse

flex-sm-row
flex-sm-row-reverse
flex-sm-column
flex-sm-column-reverse

flex-md-row
flex-md-row-reverse
flex-md-column
flex-md-column-reverse

flex-lg-row
flex-lg-row-reverse
flex-lg-column
flex-lg-column-reverse

flex-xl-row
flex-xl-row-reverse
flex-xl-column
flex-xl-column-reverse

Flex row

flex-row and flex-row-reverse

Flex column

flex-column and flex-column-reverse

Flex justify

The justify content flex setting can be changed using the flex justify classes. This by default will modify the flexbox items on the x-axis but is reversed when using flex direction column, modifying the y-axis.

justify-start
justify-end
justify-center
justify-space-between
justify-space-around

justify-sm-start
justify-sm-end
justify-sm-center
justify-sm-space-between
justify-sm-space-around

justify-md-start
justify-md-end
justify-md-center
justify-md-space-between
justify-md-space-around

justify-lg-start
justify-lg-end
justify-lg-center
justify-lg-space-between
justify-lg-space-around

justify-xl-start
justify-xl-end
justify-xl-center
justify-xl-space-between
justify-xl-space-around

Justify start

justify-start

Justify center

justify-center

Justify end

justify-end

Justify space between

justify-space-between

Justify space around

justify-space-around

Flex Align

The align-items flex setting can be changed using the flex align classes. This by default will modify the flexbox items on the y-axis but is reversed when using flex direction column, modifying the x-axis.

align-start
align-end
align-center
align-stretch

align-sm-start
align-sm-end
align-sm-center
align-sm-stretch

align-md-start
align-md-end
align-md-center
align-md-stretch

align-lg-start
align-lg-end
align-lg-center
align-lg-stretch

align-xl-start
align-xl-end
align-xl-center
align-xl-stretch

Align start

align-start

Align center

align-center

Align end

align-end

Align stretch

align-stretch

Flex align self

The align self flex setting can be changed using the flex align-self classes. This by default will modify the flexbox items on the x-axis but is reversed when using flex direction column, modifying the y-axis.

align-self-start
align-self-end
align-self-center
align-self-auto
align-self-stretch

align-self-sm-start
align-self-sm-end
align-self-sm-center
align-self-sm-auto
align-self-sm-stretch

align-self-md-start
align-self-md-end
align-self-md-center
align-self-md-auto
align-self-md-stretch

align-self-lg-start
align-self-lg-end
align-self-lg-center
align-self-lg-auto
align-self-lg-stretch

align-self-xl-start
align-self-xl-end
align-self-xl-center
align-self-xl-auto
align-self-xl-stretch

Align self start

align-self-start

Align self center

align-self-center

Align self end

align-self-end

Align self stretch

align-self-stretch

Align self auto

align-self-auto

Flex wrap

By default .d-flex does not provide any wrapping (behaves similarly to flex-wrap: nowrap). This can be modified by applying flex-wrap helper classes in the format flex(-{breakpoint})-{condition} where condition can be nowrap, wrap, or wrap-reverse.

flex-nowrap
flex-wrap
flex-wrap-reverse

flex-sm-nowrap
flex-sm-wrap
flex-sm-wrap-reverse

flex-md-nowrap
flex-md-wrap
flex-md-wrap-reverse

flex-lg-nowrap
flex-lg-wrap
flex-lg-wrap-reverse

flex-xl-nowrap
flex-xl-wrap
flex-xl-wrap-reverse

Flex nowrap

flex-nowrap

Flex wrap

flex-wrap

Flex wrap reverse

flex-wrap-reverse

Flex order

You can change the visual order of flex items with the order utilities.

order-first
order-0
order-1
order-2
order-3
order-4
order-5
order-6
order-7
order-8
order-9
order-10
order-11
order-12
order-last

order-sm-first
order-sm-0
order-sm-1
order-sm-2
order-sm-3
order-sm-4
order-sm-5
order-sm-6
order-sm-7
order-sm-8
order-sm-9
order-sm-10
order-sm-11
order-sm-12
order-sm-last

order-md-first
order-md-0
order-md-1
order-md-2
order-md-3
order-md-4
order-md-5
order-md-6
order-md-7
order-md-8
order-md-9
order-md-10
order-md-11
order-md-12
order-md-last

order-lg-first
order-lg-0
order-lg-1
order-lg-2
order-lg-3
order-lg-4
order-lg-5
order-lg-6
order-lg-7
order-lg-8
order-lg-9
order-lg-10
order-lg-11
order-lg-12
order-lg-last

order-lg-first
order-xl-0
order-xl-1
order-xl-2
order-xl-3
order-xl-4
order-xl-5
order-xl-6
order-xl-7
order-xl-8
order-xl-9
order-xl-10
order-xl-11
order-xl-12
order-xl-last

Flex order

order-first

Flex shrink and grou

These can be applied by adding the helper class in the format flex-{condition}-{value}, where condition can be either grow or shrink and value can be either 0 or 1. The condition grow will permit an element to grow to fill available space, whereas shrink will permit an element to shrink down to only the space needs for its contents. However, this will only happen if the element must shrink to fit their container such as a container resize or being effected by a flex-grow-1. The value 0 will prevent the condition from occurring whereas 1 will permit the condition.

flex-grow-0
flex-grow-1
flex-shrink-0
flex-shrink-1

flex-sm-grow-0
flex-sm-grow-1
flex-sm-shrink-0
flex-sm-shrink-1

flex-md-grow-0
flex-md-grow-1
flex-md-shrink-0
flex-md-shrink-1

flex-lg-grow-0
flex-lg-grow-1
flex-lg-shrink-0
flex-lg-shrink-1

flex-xl-grow-0
flex-xl-grow-1
flex-xl-shrink-0
flex-xl-shrink-1

Spacer

spacer