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.
d-flex
d-inline-flex
.flex-row
to set a horizontal direction (the browser default), or .flex-row-reverse
to start the horizontal direction from the opposite side.
.flex-column
to set a vertical direction, or .flex-column-reverse
to start the vertical direction from the opposite side.
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
.
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
).
start
, end
, center
, baseline
, or stretch
(browser default).
Responsive variations also exist for align-items
.
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
).
align-items: start
, end
, center
, baseline
, or stretch
(browser default).
.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.
.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.
align-items: start
, end
, center
, baseline
, or stretch
(browser default).
.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 it’s contents to a new line, “shrinking” to allow more space for the previous flex item with .w-100
.
.mr-auto
), and pushing two items to the left (.ml-auto
).
Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default justify-content value. See this StackOverflow answer.
margin-top: auto
or margin-bottom: auto
.
align-items: start
, end
, center
, baseline
, or stretch
(browser default).
.flex-nowrap
, wrapping with .flex-wrap
, or reverse wrapping with .flex-wrap-reverse
.
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.
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.
d-flex align-content-start flex-wrap
d-flex align-content-end flex-wrap
d-flex align-content-center flex-wrap