Flexbox Utilities in Bootstrap
From the Bootstrap 5 cheat sheet · Layout & Grid · verified Jul 2026
Flexbox Utilities
Flexbox layout utilities
html
<!-- Display Flex -->
<div class="d-flex">Flexbox container</div>
<div class="d-inline-flex">Inline flexbox</div>
<!-- Direction -->
<div class="d-flex flex-row">Horizontal (default)</div>
<div class="d-flex flex-column">Vertical</div>
<div class="d-flex flex-row-reverse">Horizontal reversed</div>
<div class="d-flex flex-column-reverse">Vertical reversed</div>
<!-- Justify Content -->
<div class="d-flex justify-content-start">Left</div>
<div class="d-flex justify-content-center">Center</div>
<div class="d-flex justify-content-end">Right</div>
<div class="d-flex justify-content-between">Space between</div>
<div class="d-flex justify-content-around">Space around</div>
<div class="d-flex justify-content-evenly">Space evenly</div>💡 Flexbox utilities work with d-flex or d-inline-flex
⚡ All flexbox utilities have responsive variants
📌 Use gap utilities for consistent spacing
🔥 Combine with margin utilities for fine control