Bootstrap: Utilities “Flex”

Bootstrap utilities Flex utility can be used to manage the layout, alignment, grid columns, navigation, and other components of the page.

All flex classes come with additional responsive classes, which makes it easy to set a specific flex class on specific screen size.

The * the symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.

Class Description
.d-*-flexCreates a flexbox container for different screens
.d-*-inline-flexCreates an inline flexbox container for different screens
.flex-*-rowDisplay flex items horizontally on different screens
.flex-*-row-reverseDisplay flex items horizontally, and right-aligned, on different screens
.flex-*-columnDisplay flex items vertically on different screens
.flex-*-column-reverseDisplay flex items vertically, with reversed order, on different screens screens
.justify-content-*-startDisplay flex items from the start (left-aligned) on different screens
.justify-content-*-endDisplay flex items at the end (right-aligned) on different screens
.justify-content-*-centerDisplay flex items in the center of a flex container on different screens
.justify-content-*-betweenDisplay flex items in “between” on different screens
.justify-content-*-aroundDisplay flex items “around” on different screens
.flex-*-fillForce flex items into equal widths on different screens
.flex-*-grow-0Don’t make the items grow on different screens
.flex-*-grow-1Make items grow on different screens
.flex-*-shrink-0Don’t make the items shrink on different screens
.flex-*-shrink-1Make items shrink on different screens
.order-*-0-12Change the order from 0 to 12 on small screens
.flex-*-nowrapDon’t wrap items on different screens
.flex-*-wrapWrap items on different screens
.flex-*-wrap-reverseReverse the wrapping of items on different screens
.align-content-*-startAlign gathered items from the start on different screens
.align-content-*-endAlign gathered items at the end on different screens
.align-content-*-centerAlign gathered items in the center on different screens
.align-content-*-aroundAlign gathered items “around” on different screens
.align-content-*-stretchStretch gathered items on different screens
.align-items-*-startAlign single rows of items from the start on different screens
.align-items-*-endAlign single rows of items at the end on different screens
.align-items-*-centerAlign single rows of items in the center on different screens
.align-items-*-baselineAlign single rows of items on the baseline on different screens
.align-items-*-stretchStretch single rows of items on different screens
.align-self-*-startAlign a flex item from the start on different screens
.align-self-*-endAlign a flex item at the end on different screens
.align-self-*-centerAlign a flex item in the center on different screens
.align-self-*-baselineAlign a flex item on the baseline on different screens
.align-self-*-stretchStretch a flex item on different screens
Tagged : / / / / / / / /