Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
Flex enable
To create flexbox container and transform direct children elements into flex items add .d-flex
or .d-inline-flex
class to element. Flex containers and items are able to be modified further with additional flex properties.
<div class="d-flex p-2">I am a flexbox container!</div>
<div class="d-inline-flex p-2">I am a inline flexbox container!</div>
Responsive variations also exist for .d-flex
and .d-inline-flex
as .d-flex-*
and .d-inline-flex-*
. You can change asterisk to sm
, md
, lg
, xl
or xxl
.
Direction
Set the direction of flex items in a flex container with direction utilities.
In most cases you can omit the horizontal class here as the browser default is row
.
However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
Use .flex-row
to set a horizontal direction (the browser default), or .flex-row-r
to start the horizontal direction from the opposite side.
<div class="d-flex flex-row">
<div class="p-2 bg-lightCyan">Flex item 1</div>
<div class="p-2 bg-cyan">Flex item 2</div>
<div class="p-2 bg-darkCyan">Flex item 3</div>
</div>
<div class="d-flex flex-row-r">
<div class="p-2 bg-lightCyan">Flex item 1</div>
<div class="p-2 bg-cyan">Flex item 2</div>
<div class="p-2 bg-darkCyan">Flex item 3</div>
</div>
Use .flex-column
to set a vertical direction, or .flex-column-r
to start the vertical direction from the opposite side.
<div class="d-flex flex-column">
<div class="p-2 bg-lightCyan">Flex item 1</div>
<div class="p-2 bg-cyan">Flex item 2</div>
<div class="p-2 bg-darkCyan">Flex item 3</div>
</div>
<div class="d-flex flex-column-r">
<div class="p-2 bg-lightCyan">Flex item 1</div>
<div class="p-2 bg-cyan">Flex item 2</div>
<div class="p-2 bg-darkCyan">Flex item 3</div>
</div>
Justify content
Use justify-content
utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column
).
Choose from start
(browser default), end
, center
, between
, or around
.
<div class="d-flex flex-justify-start">...</div>
<div class="d-flex flex-justify-end">...</div>
<div class="d-flex flex-justify-center">...</div>
<div class="d-flex flex-justify-between">...</div>
<div class="d-flex flex-justify-around">...</div>
Align items
Use align-items
utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column
).
Choose from start
, end
, center
, baseline
, or stretch
(browser default).
<div class="d-flex flex-align-start">...</div>
<div class="d-flex flex-align-end">...</div>
<div class="d-flex flex-align-center">...</div>
<div class="d-flex flex-align-baseline">...</div>
<div class="d-flex flex-align-stretch">...</div>
Align self
Use align-self
utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column
).
Choose from the same options as align-items: start
, end
, center
, baseline
, or stretch
(browser default).
<div class="d-flex">
<div class="flex-self-start">...</div>
<div class="flex-self-end">...</div>
<div class="flex-self-center">...</div>
<div class="flex-self-baseline">...</div>
<div class="flex-self-stretch">...</div>
</div>
Align content
Use align-content
utilities on flexbox containers to align flex items together on the cross axis.
Choose from start
(browser default), end
, center
, between
, around
, or stretch
.
To demonstrate these utilities, we’ve enforced flex-wrap: wrap
and increased the number of flex items.
This property has no effect on single rows of flex items.
<div class="d-flex flex-content-start flex-wrap">...</div>
<div class="d-flex flex-content-end flex-wrap">...</div>
<div class="d-flex flex-content-center flex-wrap">...</div>
<div class="d-flex flex-content-between flex-wrap">...</div>
<div class="d-flex flex-content-around flex-wrap">...</div>
<div class="d-flex flex-content-stretch flex-wrap">...</div>
Auto margins
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins.
.flex-justify-content
Easily move all flex items to one side, but keep another on the opposite end by mixing justify-content
with margin-right: auto
or margin-left: auto
.
<div class="d-flex flex-justify-end">
<div class="mr-auto">Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>
<div class="d-flex flex-justify-start">
<div>Flex item</div>
<div>Flex item</div>
<div class="ml-auto">Flex item</div>
</div>
.flex-align-items
Similarly, move one flex item to the top or bottom of a container by mixing align-items
, flex-direction: column
, and margin-top: auto
or margin-bottom: auto
.
Wrap
Change how flex items wrap in a flex container.
Choose from no wrapping at all (the browser default) with .flex-nowrap
, wrapping with .flex-wrap
, or reverse wrapping with .flex-wrap-r
.
<div class="d-flex flex-nowrap">...</div>
<div class="d-flex flex-wrap">...</div>
<div class="d-flex flex-wrap-r">...</div>
Order
Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed.
<div class="d-flex flex-nowrap">
<div class="order-3">First flex item</div>
<div class="order-2">Second flex item</div>
<div class="order-1">Third flex item</div>
</div>
Responsive
All flex utilities classes has media variants with breakpoints suffixes:
-sm
,
-md
,
-lg
,
-xl
,
-xxl
.