Enable flex 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. The .d-flex class makes
the flex container a block-level element. The
.d-inline-flex class makes the flex container an
atomic inline-level element. Please note: an
anonymous flex item that contains only white space is not
rendered, as if it were designated display: none.
Also clear and
vertical-align properties have no effect on flex
items, and float causes the
display property of the element to compute to
block.
Flexbox container
I'm a flexbox container!
Inline flexbox container
I'm an inline flexbox container!
| Display classes | |
.d-flex |
Displays an element as a block-level flex container |
.d-[breakpoint]-flex |
Responsive variations of .d-flex class.
Options for [breakpoint]:
sm, md, lg,
xl, xxl screen sizes
|
.d-inline-flex |
Displays an element as an inline-level flex container |
.d-[breakpoint]-inline-flex |
Responsive variations of
.d-inline-flex class. Options for
[breakpoint]: sm,
md, lg, xl,
xxl screen sizes
|
Flex 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-reverse to start
the horizontal direction from the opposite side. Use
.flex-column to set a vertical direction, or
.flex-column-reverse to start the vertical
direction from the opposite side.
Row direction
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Reverse row direction
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Column direction
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Reverse column direction
Flex item 1
Flex item 2
Flex item 3
Flex item 4
| Flex row classes | ||
.flex-row |
Default value. The flexible items are displayed horizontally, as a row | |
.flex-[breakpoint]-row |
Responsive variations of .flex-row class.
Options for [breakpoint]:
sm, md, lg,
xl, xxl screen sizes
|
|
.flex-row-reverse |
Same as row, but in reverse order | |
.flex-[breakpoint]-row-reverse |
Responsive variations of
.flex-row-reverse class. Options for
[breakpoint]: sm,
md, lg, xl,
xxl screen sizes
|
|
| Flex column classes | ||
.flex-column |
The flexible items are displayed vertically, as a column | |
.flex-[breakpoint]-column |
Responsive variations of
.flex-column class. Options for
[breakpoint]: sm,
md, lg, xl,
xxl screen sizes
|
|
.flex-column-reverse |
Same as column, but in reverse order | |
.flex-[breakpoint]-column-reverse |
Responsive variations of
.flex-column-reverse class. Options for
[breakpoint]: sm,
md, lg, xl,
xxl screen sizes
|
|
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 values. The alignment is done after the
lengths and auto margins are applied, meaning that, if in a
Flexbox layout there is at least one flexible element, with
flex-grow different from 0, it will
have no effect as there won't be any available space.
Beginning (start) of the container
Flex item
Flex item
Flex item
Center of the container
Flex item
Flex item
Flex item
End of the container
Flex item
Flex item
Flex item
With space between the lines
Flex item
Flex item
Flex item
With space before, between, and after the lines
Flex item
Flex item
Flex item
| Justify content classes | |
.justify-content-[value] |
Aligns the flex container's items when the items don't
use all available space on the main-axis (horizontally).
Available options for [value]:
start (browser default), end,
center, between, or
around.
|
.justify-content-[breakpoint]-[value]
|
Responsive variations of
.justify-content-[value] classes. Options
for [breakpoint]: sm,
md, lg, xl,
xxl screen sizes
|
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). Basically it works like justify-content,
but in the perpendicular direction. Tip: use
the align-self property of each item to override
the align-items property.
Beginning (start) of the container
Flex item
Flex item
Flex item
Center of the container
Flex item
Flex item
Flex item
End of the container
Flex item
Flex item
Flex item
WBaseline of the container
Flex item
Flex item
Flex item
Fit the container
Flex item
Flex item
Flex item
| Align items classes | |
.align-items-[value] |
Alignment of items inside flex container. Options for
[value]: start,
end, center,
baseline, or stretch (browser
default).
|
.align-items-[breakpoint]-[value] |
Responsive variations of
.align-items-[value] classes. Options for
[breakpoint]: sm,
md, lg, xl,
xxl screen sizes
|
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). The property doesn't
apply to block-level boxes, or to table cells.
Beginning (start) of the container
Flex item
Aligned flex item
Flex item
Center of the container
Flex item
Aligned flex item
Flex item
End of the container
Flex item
Aligned flex item
Flex item
Baseline of the container
Flex item
Aligned flex item
Flex item
Fit the container
Flex item
Aligned flex item
Flex item
| Align self classes | |
.align-self-[value] |
Alignment of the selected item inside flex container.
Options for [value]:
start, end,
center, baseline, or
stretch (browser default).
|
.align-self-[breakpoint]-[value] |
Responsive variations of
.align-self-[value] classes. Options for
[breakpoint]: sm,
md, lg, xl,
xxl screen sizes.
|
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).
Unfortunately, IE10 and IE11 do not properly support auto
margins on flex items whose parent has a non-default
justify-content value.
Right auto margin
Flex item 1
Flex item 2
Flex item 3
Left auto margin
Flex item 1
Flex item 2
Flex item 3
Bottom auto margin
Flex item 1
Flex item 2
Flex item 3
Top auto margin
Flex item 1
Flex item 2
Flex item 3
| Auto margin classes | |
.m[t,b,s,e]-auto |
Pushes flex items to specified side, where "s" is left, "e" is right, "t" is top and "b" is bottom. |
.m[t,b,s,e]-[breakpoint]-auto |
Responsive variations of
.m[t,b,s,e]-auto classes. Options for
[breakpoint]: sm,
md, lg, xl,
xxl screen sizes
|
Flex wrap
The
flex-wrap classes specify whether flex items
are forced into a single line or can be wrapped onto multiple
lines. If wrapping is allowed, this property also enables you to
control the direction in which lines are stacked.
Note: if the elements are not flexible items,
the flex-wrap property has no effect. Supports 2
directions: default and reversed.
No wrap
Flex item
Flex item
Flex item
Flex item
Wrap - default direction
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Wrap - reversed direction
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
| Flex wrap classes | |
.flex-nowrap |
The flex items are laid out in a single line - may cause the flex container to overflow |
.flex-[breakpoint]-nowrap |
Responsive variations of
.flex-nowrap class. Options for
[breakpoint]: sm,
md, lg, xl,
xxl screen sizes
|
.flex-wrap |
The flex items break into multiple lines |
.flex-[breakpoint]-wrap |
Responsive variations of .flex-wrap class.
Options for [breakpoint]:
sm, md, lg,
xl, xxl screen sizes
|
.flex-wrap-reverse |
Behaves the same as .flex-wrap, but in
reverse order
|
.flex-[breakpoint]-wrap-reverse |
Responsive variations of
.flex-wrap-reverse class. Options for
[breakpoint]: sm,
md, lg, xl,
xxl screen sizes
|
Flex 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. Elements with the same order value
are laid out in the order in which they appear in the source
code. Note: If the element is not a flexible
item, the order property has no effect.
Default order
Flex item 1
Flex item 2
Flex item 3
Custom order
Flex item 1
Flex item 2
Flex item 3
Default order
Flex item 1
Flex item 2
Flex item 3
Custom order
Flex item 1
Flex item 2
Flex item 3
| Flex order classes | |
.order-[value] |
Specify the order used to lay out flex items in their
flex container. Values for [value]:
1, 2, ... 12.
|
.order-[breakpoint]-[value] |
Responsive variations of
.order-[value] classes. Options for
[breakpoint]: sm,
md, lg, xl,
xxl screen sizes
|
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. Note: this property has no
effect on single rows of flex items.
Start of the flex container
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
End of the flex container
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Center of the flex container
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Evenly in the flex container
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Evenly with half-size spaces on either end
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Stretch to take up the remaining space
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
| Align content classes | |
.align-content-[value] |
Similar to align-items, but instead of aligning flex
items, it aligns flex lines. Options for
[value] are similar to
.justify-content-[value] classes
|
.align-content-[breakpoint]-[value] |
Responsive variations of
.align-content-[value] classes. Options for
[breakpoint]: sm,
md, lg, xl,
xxl screen sizes
|
