Bootstrap Flex Utilities
Bootstrap's flex utility classes let you use CSS flexbox layout directly through class names, without writing custom CSS. Add .d-flex to any element to make it a flex container.
Once an element is a flex container, additional classes control direction, wrapping, alignment and spacing of its flex children, such as .justify-content-center or .align-items-center.
<div class="d-flex justify-content-between align-items-center">...</div>Enabling flex layout
.d-flex turns an element into a flex container with row direction by default. .flex-column switches the direction to vertical stacking instead.
Aligning flex items
Use .justify-content-{value} to align items along the main axis (like center, between, around), and .align-items-{value} to align them along the cross axis (like start, center, end).
<div class="d-flex justify-content-between bg-light p-3">
<div>Left</div>
<div>Right</div>
</div>Two boxes pushed to opposite ends of a light gray flex containerd-flex enables flexbox, and justify-content-between pushes the two children to opposite sides.
<div class="d-flex flex-column align-items-center">
<div class="mb-2">Item 1</div>
<div>Item 2</div>
</div>Two stacked items centered horizontally within their containerflex-column stacks items vertically, and align-items-center centers them along the horizontal cross axis.
Key points
- .d-flex enables flexbox layout on an element.
- .flex-column switches the main axis to vertical.
- .justify-content-{value} aligns items along the main axis.
- .align-items-{value} aligns items along the cross axis.