Bootstrap.Utilities.Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

Flex containers

Block containers

block : Attribute msg

Make an element become a flex container (whilst being a block level element).

blockSm : Attribute msg

Make an element become a flex container (whilst being a block level element) from SM breakpoint and up.

blockMd : Attribute msg

Make an element become a flex container (whilst being a block level element) from MD breakpoint and up.

blockLg : Attribute msg

Make an element become a flex container (whilst being a block level element) from LG breakpoint and up.

blockXl : Attribute msg

Make an element become a flex container (whilst being a block level element) from XL breakpoint and up.

Inline containers

inline : Attribute msg

Make and element become a flex container (whilst being an inline element).

inlineSm : Attribute msg

Make and element become a flex container (whilst being an inline element) from SM breakpoint and up.

inlineMd : Attribute msg

Make and element become a flex container (whilst being an inline element) from MD breakpoint and up.

inlineLg : Attribute msg

Make and element become a flex container (whilst being an inline element) from LG breakpoint and up.

inlineXl : Attribute msg

Make and element become a flex container (whilst being an inline element) from XL breakpoint and up.

Direction

row : Attribute msg

Set flex direction to row.

rowSm : Attribute msg

Set flex direction to row from SM breakpoint and up.

rowMd : Attribute msg

Set flex direction to row from MD breakpoint and up.

rowLg : Attribute msg

Set flex direction to row from LG breakpoint and up.

rowXl : Attribute msg

Set flex direction to row from XL breakpoint and up.

rowReverse : Attribute msg

Set flex direction to row-reverse (starting from the oposite side).

rowReverseSm : Attribute msg

Set flex direction to row-reverse (starting from the oposite side) from SM breakpoint and up.

rowReverseMd : Attribute msg

Set flex direction to row-reverse (starting from the oposite side) from MD breakpoint and up.

rowReverseLg : Attribute msg

Set flex direction to row-reverse (starting from the oposite side) from LG breakpoint and up.

rowReverseXl : Attribute msg

Set flex direction to row-reverse (starting from the oposite side) from XL breakpoint and up.

col : Attribute msg

Set flex direction to flex-column.

colSm : Attribute msg

Set flex direction to flex-column from SM breakpoint and up.

colMd : Attribute msg

Set flex direction to flex-column from MD breakpoint and up.

colLg : Attribute msg

Set flex direction to flex-column from LG breakpoint and up.

colXl : Attribute msg

Set flex direction to flex-column from XL breakpoint and up.

colReverse : Attribute msg

Set flex direction to flex-column-reverse.

colReverseSm : Attribute msg

Set flex direction to flex-column-reverse from SM breakpoint and up.

colReverseMd : Attribute msg

Set flex direction to flex-column-reverse from MD breakpoint and up.

colReverseLg : Attribute msg

Set flex direction to flex-column-reverse from LG breakpoint and up.

colReverseXl : Attribute msg

Set flex direction to flex-column-reverse from XL breakpoint and up.

Justify content

Use 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.

justifyStart : Attribute msg

Set main axis alignment for items in flexbox container to start.

justifyStartSm : Attribute msg

Set main axis alignment for items in flexbox container to start. Applicable from breakpoint SM and up.

justifyStartMd : Attribute msg

Set main axis alignment for items in flexbox container to start. Applicable from breakpoint MD and up.

justifyStartLg : Attribute msg

Set main axis alignment for items in flexbox container to start. Applicable from breakpoint LG and up.

justifyStartXl : Attribute msg

Set main axis alignment for items in flexbox container to start. Applicable from breakpoint XL and up.

justifyEnd : Attribute msg

Set main axis alignment for items in flexbox container to end

justifyEndSm : Attribute msg

Set main axis alignment for items in flexbox container to end. Applicable from breakpoint SM and up.

justifyEndMd : Attribute msg

Set main axis alignment for items in flexbox container to end. Applicable from breakpoint MD and up.

justifyEndLg : Attribute msg

Set main axis alignment for items in flexbox container to end. Applicable from breakpoint LG and up.

justifyEndXl : Attribute msg

Set main axis alignment for items in flexbox container to end. Applicable from breakpoint XL and up.

justifyCenter : Attribute msg

Set main axis alignment for items in flexbox container to center.

justifyCenterSm : Attribute msg

Set main axis alignment for items in flexbox container to center. Applicable from breakpoint SM and up.

justifyCenterMd : Attribute msg

Set main axis alignment for items in flexbox container to center. Applicable from breakpoint MD and up.

justifyCenterLg : Attribute msg

Set main axis alignment for items in flexbox container to center. Applicable from breakpoint LG and up.

justifyCenterXl : Attribute msg

Set main axis alignment for items in flexbox container to center. Applicable from breakpoint XL and up.

justifyBetween : Attribute msg

Set main axis alignment for items in flexbox container to between.

justifyBetweenSm : Attribute msg

Set main axis alignment for items in flexbox container to between. Applicable from breakpoint SM and up.

justifyBetweenMd : Attribute msg

Set main axis alignment for items in flexbox container to between. Applicable from breakpoint MD and up.

justifyBetweenLg : Attribute msg

Set main axis alignment for items in flexbox container to between. Applicable from breakpoint LG and up.

justifyBetweenXl : Attribute msg

Set main axis alignment for items in flexbox container to between. Applicable from breakpoint XL and up.

justifyAround : Attribute msg

Set main axis alignment for items in flexbox container to around.

justifyAroundSm : Attribute msg

Set main axis alignment for items in flexbox container to around. Applicable from breakpoint SM and up.

justifyAroundMd : Attribute msg

Set main axis alignment for items in flexbox container to around. Applicable from breakpoint MD and up.

justifyAroundLg : Attribute msg

Set main axis alignment for items in flexbox container to around. Applicable from breakpoint LG and up.

justifyAroundXl : Attribute msg

Set main axis alignment for items in flexbox container to around. Applicable from breakpoint XL and up.

Align items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start or x-axis if flex-direction: column). Choose from start / end / center / baseline / or stretch (browser default).

alignItemsStart : Attribute msg

Set cross axis alignment for items in flexbox container to start.

alignItemsStartSm : Attribute msg

Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint SM and up.

alignItemsStartMd : Attribute msg

Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint MD and up.

alignItemsStartLg : Attribute msg

Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint LG and up.

alignItemsStartXl : Attribute msg

Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint LG and up.

alignItemsEnd : Attribute msg

Set cross axis alignment for items in flexbox container to end.

alignItemsEndSm : Attribute msg

Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint SM and up.

alignItemsEndMd : Attribute msg

Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint MD and up.

alignItemsEndLg : Attribute msg

Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint LG and up.

alignItemsEndXl : Attribute msg

Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint LG and up.

alignItemsCenter : Attribute msg

Set cross axis alignment for items in flexbox container to center.

alignItemsCenterSm : Attribute msg

Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint SM and up.

alignItemsCenterMd : Attribute msg

Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint MD and up.

alignItemsCenterLg : Attribute msg

Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint LG and up.

alignItemsCenterXl : Attribute msg

Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint LG and up.

alignItemsBaseline : Attribute msg

Set cross axis alignment for items in flexbox container to baseline.

alignItemsBaselineSm : Attribute msg

Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint SM and up.

alignItemsBaselineMd : Attribute msg

Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint MD and up.

alignItemsBaselineLg : Attribute msg

Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint LG and up.

alignItemsBaselineXl : Attribute msg

Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint LG and up.

alignItemsStretch : Attribute msg

Set cross axis alignment for items in flexbox container to stretched.

alignItemsStretchSm : Attribute msg

Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint SM and up.

alignItemsStretchMd : Attribute msg

Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint MD and up.

alignItemsStretchLg : Attribute msg

Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint LG and up.

alignItemsStretchXl : Attribute msg

Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint LG and up.

Wrapping

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with nowrap / wrap or reverse wrapping.

wrap : Attribute msg

Allow flex items in a flex container to break into multiple lines.

wrapSm : Attribute msg

Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint SM and up.

wrapMd : Attribute msg

Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint MD and up.

wrapLg : Attribute msg

Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint LG and up.

wrapXl : Attribute msg

Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint XL and up.

wrapReverse : Attribute msg

Allow flex items in a flex container to break into multiple lines in reverse order.

wrapReverseSm : Attribute msg

Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint SM and up.

wrapReverseMd : Attribute msg

Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint MD and up.

wrapReverseLg : Attribute msg

Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint LG and up.

wrapReverseXl : Attribute msg

Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint XL and up.

nowrap : Attribute msg

Don't allow flex items in a flex container to break into multiple lines.

nowrapSm : Attribute msg

Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint SM and up.

nowrapMd : Attribute msg

Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint MD and up.

nowrapLg : Attribute msg

Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint LG and up.

nowrapXl : Attribute msg

Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint XL and up.

Item level

Align self

Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start or x-axis if flex-direction: column). Choose from the same options as align-items: start / end / center / baseline / or stretch (browser default).

alignSelfStart : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to start.

alignSelfStartSm : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint SM and up.

alignSelfStartMd : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint MD and up.

alignSelfStartLg : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint LG and up.

alignSelfStartXl : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint LG and up.

alignSelfEnd : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to end.

alignSelfEndSm : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint SM and up.

alignSelfEndMd : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint MD and up.

alignSelfEndLg : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint LG and up.

alignSelfEndXl : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint LG and up.

alignSelfCenter : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to center.

alignSelfCenterSm : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint SM and up.

alignSelfCenterMd : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint MD and up.

alignSelfCenterLg : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint LG and up.

alignSelfCenterXl : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint LG and up.

alignSelfBaseline : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to baseline.

alignSelfBaselineSm : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint SM and up.

alignSelfBaselineMd : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint MD and up.

alignSelfBaselineLg : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint LG and up.

alignSelfBaselineXl : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint LG and up.

alignSelfStretch : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to stretch.

alignSelfStretchSm : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint SM and up.

alignSelfStretchMd : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint MD and up.

alignSelfStretchLg : Attribute msg

Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint LG and up.

alignSelfStretchXl : Attribute msg