Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
Flex on BootstrapFlex Behaviors
Apply display
utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.
<div class="d-flex p-2 bg-body-secondary mb-2">Flexbox container!</div>
<div class="d-inline-flex p-2 bg-body-secondary">Inline flexbox container!</div>
Direction Row
Use .flex-row
to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.
<div class="d-flex bg-body-secondary mb-3 flex-row">
<div class="p-2 bg-body-secondary border">Flex item 1</div>
<div class="p-2 bg-body-secondary border">Flex item 2</div>
<div class="p-2 bg-body-secondary border">Flex item 3</div>
</div>
<div class="d-flex bg-body-secondary mb-3 flex-row-reverse">
<div class="p-2 bg-body-secondary border">Flex item 1</div>
<div class="p-2 bg-body-secondary border">Flex item 2</div>
<div class="p-2 bg-body-secondary border">Flex item 3</div>
</div>
Direction Column
Use
.flex-column
to set a vertical direction, or
.flex-column-reverse
to start the vertical direction from the opposite side
<div class="d-flex bg-body-secondary mb-3 flex-column">
<div class="p-2 bg-body-secondary border">Flex item 1</div>
<div class="p-2 bg-body-secondary border">Flex item 2</div>
<div class="p-2 bg-body-secondary border">Flex item 3</div>
</div>
<div class="d-flex bg-body-secondary mb-3 flex-column-reverse">
<div class="p-2 bg-body-secondary border">Flex item 1</div>
<div class="p-2 bg-body-secondary border">Flex item 2</div>
<div class="p-2 bg-body-secondary border">Flex item 3</div>
</div>
Justify Content
justify-contentjustify-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
, oraround.
<div class="d-flex justify-content-start bg-body-secondary mb-2">
<div class="p-2 bg-body-secondary border">Flex Item</div>
</div>
<div class="d-flex justify-content-end bg-body-secondary mb-2">
<div class="p-2 bg-body-secondary border">Flex Item</div>
</div>
<div class="d-flex justify-content-center bg-body-secondary mb-2">
<div class="p-2 bg-body-secondary border">Flex Item</div>
</div>
<div class="d-flex justify-content-between bg-body-secondary mb-2">
<div class="p-2 bg-body-secondary border">Flex Item</div>
</div>
<div class="d-flex justify-content-around bg-body-secondary mb-2">
<div class="p-2 bg-body-secondary border">Flex Item</div>
</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 align-items-start bg-body-secondary mb-2" style="height: 5rem;">
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex align-items-end bg-body-secondary mb-2" style="height: 5rem;">
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex align-items-center bg-body-secondary mb-2" style="height: 5rem;">
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex align-items-baseline bg-body-secondary mb-2" style="height: 5rem;">
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex align-items-stretch bg-body-secondary mb-2" style="height: 5rem;">
<div class="p-2 bg-body-secondary border">Flex item</div>
</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 bg-body-secondary mb-2" style="height: 5rem;">
<div class="border p-2 bg-body-secondary">Flex Item</div>
<div class="border p-2 bg-body-secondary align-self-start">Align self start</div>
<div class="border p-2 bg-body-secondary">Flex Item</div>
</div>
<div class="d-flex bg-body-secondary mb-2" style="height: 5rem;">
<div class="border p-2 bg-body-secondary">Flex Item</div>
<div class="border p-2 bg-body-secondary align-self-end">Align self end</div>
<div class="border p-2 bg-body-secondary">Flex Item</div>
</div>
<div class="d-flex bg-body-secondary mb-2" style="height: 5rem;">
<div class="border p-2 bg-body-secondary">Flex Item</div>
<div class="border p-2 bg-body-secondary align-self-center">Align self center</div>
<div class="border p-2 bg-body-secondary">Flex Item</div>
</div>
<div class="d-flex bg-body-secondary mb-2" style="height: 5rem;">
<div class="border p-2 bg-body-secondary">Flex Item</div>
<div class="border p-2 bg-body-secondary align-self-baseline">Align self baseline</div>
<div class="border p-2 bg-body-secondary">Flex Item</div>
</div>
<div class="d-flex bg-body-secondary mb-2" style="height: 5rem;">
<div class="border p-2 bg-body-secondary">Flex Item</div>
<div class="border p-2 bg-body-secondary align-self-stretch">Align self stretch</div>
<div class="border p-2 bg-body-secondary">Flex Item</div>
</div>
Fill
Use the .flex-fill
class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.
<div class="d-flex bg-body-secondary">
<div class="p-2 flex-fill bg-body-secondary border">Flex item with a lot of content</div>
<div class="p-2 flex-fill bg-body-secondary border">Flex item</div>
<div class="p-2 flex-fill bg-body-secondary border">Flex item</div>
</div>
Flex Grow
Use .flex-grow-*
utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the.flex-grow-1
elements uses all available space it can, while allowing the remaining two flex items their necessary space.
<div class="d-flex bg-body-secondary">
<div class="p-2 flex-grow-1 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Third flex item</div>
</div>
Flex Shrink
Use .flex-shrink-*
utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with .flex-shrink-1
is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with .w-100
.
<div class="d-flex bg-body-secondary">
<div class="p-2 w-100 bg-body-secondary border">Flex item</div>
<div class="p-2 flex-shrink-1 bg-body-secondary border">Flex item</div>
</div>
Auto margins
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right ( .me-auto
), and pushing two items to the left (.ms-auto
).
<div class="d-flex bg-body-secondary mb-2">
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex bg-body-secondary mb-2">
<div class="me-auto p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex bg-body-secondary mb-2">
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="ms-auto p-2 bg-body-secondary border">Flex item</div>
</div>
With align-items
Vertically 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.
<div class="d-flex flex-column bg-body-secondary mb-3 align-items-start" style="height: 200px;">
<div class="mb-auto p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex flex-column bg-body-secondary mb-3 align-items-end" style="height: 200px;">
<div class="mb-auto p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
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-reverse
.
<div class="d-flex flex-nowrap mb-3 bg-body-secondary border py-3" style="width: 8rem">
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex mb-3 bg-body-secondary border flex-wrap">
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex mb-3 bg-body-secondary border flex-wrap-reverse">
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
Order
Change the visualorder 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 bg-body-secondary">
<div class="order-3 p-2 bg-body-secondary border">First flex item</div>
<div class="order-2 p-2 bg-body-secondary border">Second flex item</div>
<div class="order-1 p-2 bg-body-secondary border">Third flex item</div>
</div>
Aligh content
Use align-content
utilities on flexbox containers to align flex itemstogetheron 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.
<div class="d-flex flex-wrap bg-body-secondary mb-3 align-content-start" style="height: 300px;">
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-body-secondary mb-3 align-content-center" style="height: 300px;">
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-body-secondary mb-3 align-content-end" style="height: 300px;">
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-body-secondary mb-3 align-content-between" style="height: 300px;">
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-body-secondary mb-3 align-content-around" style="height: 300px;">
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-body-secondary mb-3 align-content-stretch" style="height: 300px;">
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
<div class="p-2 bg-body-secondary border">Flex item</div>
</div>