Flex · Bootstrap v5.0 | Bootstrap flex
EnableflexbehaviorsApplydisplayutilitiestocreateaflexboxcontainerandtransformdirectchildrenelementsintoflexitems.Flexcontainersanditemsareabletobemodifiedfurtherwithadditionalflexproperties.
EnableflexbehaviorsApplydisplayutilitiestocreateaflexboxcontainerandtransformdirectchildrenelementsintoflexitems.Flexcontainersanditemsareabletobemodifiedfurtherwithadditionalflexproperties.
Apply 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 .d-xxl-flex .d-xxl-inline-flex DirectionSet 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-r...