Enable flex behaviors
displayutilities to create a flexbox container and transform direct children elementsinto flex items. Flex containers and items are able to be modified further with additional flex properties. The .d-flexclass makes the flex container a block-level element. The .d-inline-flexclass 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 clearand vertical-alignproperties have no effect on flex items, and floatcauses the displayproperty of the element to compute to block.
Flexbox container
Inline flexbox container
| Display classes | |
.d-flex
|
Displays an element as a block-levelflex container |
.d-[breakpoint]-flex
|
Responsive variations of .d-flexclass. Options for [breakpoint]: sm, md, lg, lgscreen sizes
|
.d-inline-flex
|
Displays an element as an inline-levelflex container |
.d-[breakpoint]-inline-flex
|
Responsive variations of .d-inline-flexclass. Options for [breakpoint]: sm, md, lg, lgscreen 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-rowto set a horizontal direction (the browser default), or .flex-row-reverseto start the horizontal direction from the opposite side. Use .flex-columnto set a vertical direction, or .flex-column-reverseto start the vertical direction from the opposite side.
Row direction
Reverse row direction
Column direction
Reverse column direction
| Flex row classes | ||
.flex-row
|
Default value. The flexible items are displayed horizontally, as a row | |
.flex-[breakpoint]-row
|
Responsive variations of .flex-rowclass. Options for [breakpoint]: sm, md, lg, lgscreen sizes
|
|
.flex-row-reverse
|
Same as row, but in reverse order | |
.flex-[breakpoint]-row-reverse
|
Responsive variations of .flex-row-reverseclass. Options for [breakpoint]: sm, md, lg, lgscreen sizes
|
|
| Flex column classes | ||
.flex-column
|
The flexible items are displayed vertically, as a column | |
.flex-[breakpoint]-column
|
Responsive variations of .flex-columnclass. Options for [breakpoint]: sm, md, lg, lgscreen sizes
|
|
.flex-column-reverse
|
Same as column, but in reverse order | |
.flex-[breakpoint]-column-reverse
|
Responsive variations of .flex-column-reverseclass. Options for [breakpoint]: sm, md, lg, lgscreen sizes
|
|
Justify content
justify-contentutilities 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 aroundvalues. 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-growdifferent from 0, it will have no effect as there won't be any available space.
Beginning (start) of the container
Center of the container
End of the container
With space between the lines
With space before, between, and after the lines
| 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, xlscreen sizes
|
Align items
align-itemsutilities 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-selfproperty of each item to override the align-itemsproperty.
Beginning (start) of the container
Center of the container
End of the container
WBaseline of the container
Fit the container
| 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, xlscreen sizes
|
Align self
align-selfutilities 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
Center of the container
End of the container
Baseline of the container
Fit the container
| 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, xlscreen sizes.
|
Auto margins
.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-contentvalue.
Right auto margin
Left auto margin
Bottom auto margin
Top auto margin
| Auto margin classes | |
.m[t,b,l,r]-auto
|
Pushes flex items to specified side, where "l" is left, "r" is right, "t" is top and "b" is bottom. |
.m[t,b,l,r]-[breakpoint]-auto
|
Responsive variations of .m[t,b,l,r]-autoclasses. Options for [breakpoint]: sm, md, lg, xlscreen sizes
|
Flex wrap
flex-wrapclasses 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-wrapproperty has no effect. Supports 2 directions: default and reversed.
No wrap
Wrap - default direction
Wrap - reversed direction
| 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-nowrapclass. Options for [breakpoint]: sm, md, lg, xlscreen sizes
|
.flex-wrap
|
The flex items break into multiple lines |
.flex-[breakpoint]-wrap
|
Responsive variations of .flex-wrapclass. Options for [breakpoint]: sm, md, lg, xlscreen sizes
|
.flex-wrap-reverse
|
Behaves the same as .flex-wrap, but in reverse order
|
.flex-[breakpoint]-wrap-reverse
|
Responsive variations of .flex-wrap-reverseclass. Options for [breakpoint]: sm, md, lg, xlscreen sizes
|
Flex order
orderutilities. 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
Custom order
Default order
Custom order
| 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, xlscreen sizes
|
Align content
align-contentutilities 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: wrapand increased the number of flex items. Note:this property has no effect on single rows of flex items.
Start of the flex container
End of the flex container
Center of the flex container
Evenly in the flex container
Evenly with half-size spaces on either end
Stretch to take up the remaining space
| 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, xlscreen sizes
|