Bootstrap 5 Flex
The Flexbox utilities in Bootstrap are part of the grid system and can be used to build complex and dynamic layouts.
To create a flexbox container and to transform direct children into flex items, use the d-flex class:
Example
<div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>You can click on above box to edit the code and run again.
Output
Horizontal Direction
Use .flex-row to display the flex items horizontally (side by side).
Use .flex-row-reverse to right-align the horizontal direction:
Example
<div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>You can click on above box to edit the code and run again.
Output
Vertical Direction
Use .flex-column to display the flex items vertically (on top of each other), or .flex-column-reverse to reverse the vertical direction:
Example
<div class="d-flex flex-column"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>You can click on above box to edit the code and run again.
Output
Justify Content
Use the .justify-content-* classes to change the alignment of flex items. Valid classes are start (default), end, center, between or around:
Example
<div class="d-flex justify-content-start">...</div> <div class="d-flex justify-content-end">...</div> <div class="d-flex justify-content-center">...</div> <div class="d-flex justify-content-between">...</div> <div class="d-flex justify-content-around">...</div>You can click on above box to edit the code and run again.
Output
Fill / Equal Widths
Use .flex-fill on flex items to force them into equal widths:
Example
<div class="d-flex"> <div class="p-2 bg-info flex-fill">Flex item 1</div> <div class="p-2 bg-warning flex-fill">Flex item 2</div> <div class="p-2 bg-primary flex-fill">Flex item 3</div> </div>You can click on above box to edit the code and run again.
Output
Example without .flex-fill:
Grow
Use .flex-grow-1 on a flex item to take up the rest of the space. In the example below, the first two flex items take up their necessary space, while the last item takes up the rest of the available space:
Example
<div class="d-flex"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary flex-grow-1">Flex item 3</div> </div>You can click on above box to edit the code and run again.
Output
Example without .flex-grow-1:
Order
Change the visual order of a specific flex item(s) with the .order classes. Valid classes are from 0 to 5, where the lowest number has highest priority (order-1 is shown before order-2, etc..):
Example
<div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">Flex item 1</div> <div class="p-2 bg-warning order-2">Flex item 2</div> <div class="p-2 bg-primary order-1">Flex item 3</div> </div>You can click on above box to edit the code and run again.
Output
Auto Margins
Easily add auto margins to flex items with .ms-auto (push items to the right), or by using .me-auto (push items to the left):
Example
<div class="d-flex bg-secondary"> <div class="p-2 ms-auto bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 me-auto bg-primary">Flex item 3</div> </div>You can click on above box to edit the code and run again.