Nearby lessons
32 of 39📐 BS5 Flex
📌 What Are Bootstrap 5 Flex Utilities?
Bootstrap provides flexbox utilities. Use .d-flex to create a flex container, then .flex-row / .flex-column, .justify-content-*, .align-items-*, .flex-wrap, and responsive variants (e.g. .flex-md-row).
📐 Flex Container (.d-flex, .d-inline-flex)
.d-flex – display: flex (block-level flex container). .d-inline-flex – inline flex container. Responsive: .d-md-flex, .d-lg-none, etc.
➡️ Direction (.flex-row, .flex-column)
.flex-row – main axis horizontal (default). .flex-row-reverse – reverse order. .flex-column – main axis vertical. .flex-column-reverse. Responsive: .flex-md-column.
↔️ Justify Content (.justify-content-*)
.justify-content-start – align items at the start. .justify-content-center – center. .justify-content-end – end. .justify-content-between – space between. .justify-content-around, .justify-content-evenly.
↕️ Align Items (.align-items-*)
.align-items-start – align on cross-axis start. .align-items-center – center. .align-items-end – end. .align-items-stretch (default). Use on the flex container.
✅ Flex Best Practices
- Use .d-flex then .justify-content-* and .align-items-* for layout.
- Use .flex-column for vertical stacks.
- Use responsive classes: .flex-md-row, .justify-content-lg-between.