Flex · Bootstrap v4.5 | Bootstrap flex
Quicklymanagethelayout,alignment,andsizingofgridcolumns,navigation,components,andmorewithafullsuiteofresponsiveflexboxutilities.Formorecompleximplementations,customCSSmaybenecessary.EnableflexbehaviorsApplydisplayutilitiestocreateaflexboxcontainerandtransformdirectchildrenelementsintoflexitems.Flexcontainersanditemsareabletobemodifiedfurtherwithadditionalflexproperties.
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.
Enable flex behaviorsApply display utilities 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.
<div class="d-flex p-2 bd-highlight">Im a flexbox container!</div>Im an inline flexbox container!
<div class="d-inline-flex p-2 bd-highlight">Im an inline flexbox container!</div>Responsive variations also exist for .d-flex and .d-inline-flex.
.d-flex .d-inline-flex .d-sm-flex .d-sm-inline-flex .d-md-flex .d-md-inline-flex .d-lg-flex .d-lg-inline-flex .d-xl-flex .d-xl-inline-flex DirectionSet the direction of flex items in a flex container wi...