Menu

Flex

Quickly manage and align elements with flex utilities.
Enable flex behavior

Use .d-flex to enable flex behavior. Direct children will become flex items.

I am a flexbox container
<div class="d-flex">I am a flexbox container</div>

Use .d-inline-flex to create an inline flex container.

I am an inline flexbox container
<div class="d-inline-flex">I am an inline flexbox container</div>
Direction

Use direction utilities to change the direction of flex items.

flex-row
1
2
3
flex-row-reverse
1
2
3
flex-column
1
2
3
flex-column-reverse
1
2
3
<div class="d-flex flex-row">...</div>
<div class="d-flex flex-row-reverse">...</div>
<div class="d-flex flex-column">...</div>
<div class="d-flex flex-column-reverse">...</div>
Justify content

Use justify content utilities to align flex items on the main axis.

justify-content-start
1
2
3
justify-content-end
1
2
3
justify-content-center
1
2
3
justify-content-between
1
2
3
justify-content-around
1
2
3
justify-content-evenly
1
2
3
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
Align items

Use align items utilities to align flex items on the cross axis.

align-items-start
1
2
3
align-items-end
1
2
3
align-items-center
1
2
3
align-items-baseline
small
base
large
align-items-stretch
1
2
3
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
Wrap

Use wrapping utilities to control whether flex items wrap onto multiple lines.

flex-wrap
1
2
3
4
flex-nowrap
1
2
3
4
<div class="d-flex flex-wrap">...</div>
<div class="d-flex flex-nowrap">...</div>
Fill

Use .flex-fill to force a flex item to fill the available space.

Item
flex-fill
Item
<div class="d-flex">
	<div>Item</div>
	<div class="flex-fill">flex-fill</div>
	<div>Item</div>
</div>
Grow and shrink

Use grow and shrink utilities to control how flex items resize inside a flex container.

flex-grow-1
Item
flex-grow-1
Item
flex-shrink-0
flex-shrink-0
This item can shrink when there is not enough space.
<div class="d-flex">
	<div>Item</div>
	<div class="flex-grow-1">flex-grow-1</div>
	<div>Item</div>
</div>

<div class="d-flex">
	<div class="flex-shrink-0">flex-shrink-0</div>
	<div>This item can shrink.</div>
</div>
Available grow utilities:
.flex-grow-0
.flex-grow-1

Available shrink utilities:

.flex-shrink-0
.flex-shrink-1
Order

Use order utilities to change the visual order of flex items.

1 order-3
2 order-1
3 order-2
<div class="d-flex">
	<div class="order-3">1 order-3</div>
	<div class="order-1">2 order-1</div>
	<div class="order-2">3 order-2</div>
</div>

Available order utilities:

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-first
.order-last
Responsive variations

Responsive variations are available for display, direction, justify content and align items utilities.

d-flex d-md-inline-flex
flex-column flex-md-row
justify-content-start justify-content-md-center
align-items-start align-items-md-center 
<div class="d-flex d-md-inline-flex">...</div>
<div class="d-flex flex-column flex-md-row">...</div>
<div class="d-flex justify-content-start justify-content-md-center">...</div>
<div class="d-flex align-items-start align-items-md-center">...</div>

Available responsive display utilities:

.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
.d-xxl-flex
.d-xxl-inline-flex

Available responsive direction utilities:

.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-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse

Available responsive justify content utilities:

.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly

.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly

.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly

.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly

.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly

Available responsive align items utilities:

.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch

.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch

.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch

.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch

.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch

Previous: Utilities

← Display

Next: Utilities

Grid →