Flex
Quickly manage and align elements for all sort of layouts.
Enable flex behavior
Using the .d-flex class will enable the CSS flex behavior which uses display: flex;. Direct children elements will be transformed into flex items.
I am a flexbox container
<div class="d-flex">I am a flexbox container</div>I am a flexbox inline container
<div class="d-inine-flex">I am a flexbox inline container</div>Responsive variations
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