Flex
Quickly manage the layout, alignment, and sizing of grid columns and other elements. For more complex implementations, custom CSS may be necessary. To learn flexbox read a flexbox guide.
To enable flexbox layout use .d-flex, .d-inline-flex and their responsive variations.
<div class="d-flex">
I'm a flexbox container!
All children inside me will behave in according to flexbox.
</div>Set the direction of flex items in a flex container. 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).
This property has no effect on single rows of flex items. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.
Use the .flex-fill class on a series of sibling elements to force them into equal widths while taking up all available horizontal space.
<div class="d-flex">
<div class="p-2 example">No fill</div>
<div class="p-2 flex-fill example">Equal</div>
<div class="p-2 flex-fill example">Equal</div>
</div>Use .flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space.
Use .flex-shrink-* utilities to toggle a flex item’s ability to shrink if necessary.
Change the visual order of specific flex items with order utilities. With this classes you can also