Flexbox
Overview
The flexbox utilities can replace the need for a grid system (in many instances) and provide powerful features such as vertical centering, sizing/reordering of elements, and much more.
To learn more about the flexbox, see A Complete Guide to Flexbox and Basic Concepts of Flexbox.
Enabling Flexbox
Apply the .d-flex class 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.
Direction
Set the direction of flex items in a flex container with direction utilities.
Row
Use .flex-row to set a horizontal direction (the browser default).
Row Reverse
Use .flex-row-reverse to start the horizontal direction from the opposite side.
Column
Use .flex-column to set a vertical direction.
Column Reverse
Use .flex-column-reverse to start the vertical direction from the opposite side.
Justify Content
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis.
Justify Content Start
Use .justify-content-start to justify items against the start of the flex container's main axis (the browser default).
Justify Content Center
Use .justify-content-center to justify items along the center of the flex container's main axis.
Justify Content End
Use .justify-content-end to justify items against the end of the flex container's main axis.
Justify Content Space Between
Use .justify-content-between to justify items along the flex container's main axis so there is an equal amount of space between each item.
Justify Content Space Around
Use .justify-content-around to justify items along the flex container's main axis so there is an equal amount of space around each item.
Justify Content Space Evenly
Use .justify-content-evenly to justify items along the flex container's main axis so that the spacing between any two items (and the space to the edges) is equal.
Align Items
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis.
Align Items Stretch
Use .align-items-stretch to stretch items to fill the flex container's cross axis (the browser default).
Align Items Start
Use .align-items-start to align items to the start of the flex container's cross axis.
Align Items Center
Use .align-items-center to align items along the center of the flex container's cross axis.
Align Items End
Use .align-items-end to align items to the end of the flex container's cross axis.
Align Items Baseline
Use .align-items-baseline to align items along the flex container's cross axis so all of their baselines align.
Align Self
Use align-self utilities on flexbox items to individually change their alignment on the cross axis.
Align Self Start
Use .align-self-start to align an item to the start of the flex container's cross axis.
Align Self Center
Use .align-self-center to align an item along the center of the flex container's cross axis.
Align Self End
Use .align-self-end to align an item to the end of the flex container's cross axis.
Align Self Stretch
Use .align-self-stretch to stretch an item to fill the flex container's cross axis.
Flex Wrapping
Change how flex items wrap in a flex container when there's not enough space for the flex items.
Wrap Normally
Use .flex-wrap to allow flex items to wrap.
Don't Wrap
Use .flex-no-wrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.
Align Content
Use align-content utilities on flexbox containers to align flex items together on the cross axis. Note that this only has effect on multiple rows of flex items.
Align Content End
Use .align-content-start to pack lines in a flex container against the start of the cross axis.
Align Content Center
Use .align-content-center to pack lines in a flex container in the center of the cross axis.
Align Content End
Use .align-content-end to pack lines in a flex container against the end of the cross axis.
Align Content Space Between
Use .align-content-between to distribute lines in a flex container so there is an equal amount of space between each line.
Align Content Space Around
Use .align-content-around to distribute lines in a flex container so there is an equal amount of space around each line.
Grow & Shrink
These utilities control how flex items grow and shrink.
Flex 1
Use .flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size.
Don't Grow
Use .flex-no-grow to prevent a flex item from growing. This utility is helpful for setting an element back to the browser default (don't grow).
Shrink
Use .flex-shrink to allow a flex item to shrink if needed.
Don't Shrink
Use .flex-no-shrink to prevent a flex item to shrink if needed.
Order
Change the visual order of specific flex items with these utilities.
Order First & Last
You can make an item first .order-first or last .order-last, as well as a reset it to its original order .order-default.
Auto Margins
You can create some pretty cool layouts if you combine flexbox with auto margins.
Left & Right Margins
Easily move all flex items to one side, but keep another on the opposite end with .mr-auto (margin-right: auto) or .ml-auto (margin-left: auto).