Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with Bootstrap's flexbox utilities.

Enable Flex

I'm a flexbox container!
I'm an inline flexbox container!
							<div class="d-flex">...</div>
<div class="d-inline-flex">...</div>

Flex Direction

Row (default)

Flex item 1
Flex item 2
Flex item 3

Column

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

Justify Content

start
start
end
end
center
center
between
between
around
around
							<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

start
start
center
center
end
end
stretch
stretch
							<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-stretch">...</div>
<div class="d-flex align-items-baseline">...</div>

Flex Wrap

flex-wrap

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

flex-nowrap

No wrap
No wrap
No wrap
							<div class="d-flex flex-wrap">...</div>
<div class="d-flex flex-nowrap">...</div>
<div class="d-flex flex-wrap-reverse">...</div>

Grow & Shrink

Flex grow (fills remaining space)

flex-grow-1
normal
normal

Auto margin (ms-auto)

Item
Item
ms-auto
							<!-- Grow -->
<div class="flex-grow-1">...</div>
<div class="flex-grow-0">...</div>

<!-- Shrink -->
<div class="flex-shrink-1">...</div>
<div class="flex-shrink-0">...</div>

Align Self

start
center
end
stretch
							<div class="align-self-start">...</div>
<div class="align-self-center">...</div>
<div class="align-self-end">...</div>
<div class="align-self-stretch">...</div>
<div class="align-self-baseline">...</div>

Order

First (order-3)
Second (order-1)
Third (order-2)
							<div class="order-first">...</div>
<div class="order-0">...</div>
<div class="order-1">...</div>
<div class="order-2">...</div>
<div class="order-last">...</div>