Use the .d-flex class to turn an element into a flex container, making its direct children behave as flex items.
Use the .d-flex class to turn an element into a flex container, making its direct children behave as flex items.
Use .flex-row to arrange flex items horizontally in a row (this is the default layout direction).
Tip: Apply .flex-row-reverse to reverse the horizontal order of flex items, aligning them to the right.
Use .flex-column to stack flex items vertically. To reverse the vertical order, use .flex-column-reverse.
Use the .justify-content-* classes to control the horizontal alignment of flex items. Available options include start (default), end, center, between, and around
Apply .flex-fill to flex items to make them expand and occupy equal widths within the flex container.
Use .flex-grow-1 on a flex item to make it occupy the remaining available space. In the example below, the first two items keep their natural size, while the last item expands to fill the leftover space.
Use the .order utility classes to rearrange the display order of flex items. The classes range from .order-0 to .order-5 where a lower number means higher priority (e.g., .order-1 appears before .order-2 )
Use .ms-auto to push a flex item to the right, or .me-auto to push it to the left by applying automatic margins.
Use .flex-nowrap (default), .flex-wrap, or .flex-wrap-reverse to control whether flex items stay on one line, wrap onto multiple lines, or wrap in reverse order.
Click the buttons below to observe how each class affects the wrapping behavior of flex items within the example box.
Use .align-content-* classes to adjust the vertical alignment of multiple flex item rows. Available options include .align-content-start (default) align-content-end, .align-content-center, .align-content-between, .align-content-around, and .align-content-stretch.
Note: These classes only affect multiple rows of flex items and have no impact when there is only a single row.
Click the buttons below to see how each of the five classes changes the vertical alignment of flex items within the example box.
Use .align-items-* classes to control the vertical alignment of items within a single flex row. Options include .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and the default .align-items-stretch.
Click the buttons below to view how each of the five classes affects the vertical alignment of items in the flex container.
Use .align-self-* classes to individually set the vertical alignment of a specific flex item. Available options include .align-self-start, .align-self-end, .align-self-center, .align-self-baseline and the default .align-self-stretch.
Click the buttons below to explore how each of the five classes changes the vertical alignment of an individual flex item.