Bs5 Flex in Bootstrap
Sure! Here's a quick overview of Bootstrap 5 (BS5) Flex utilities — a powerful set of helper classes that let you create flexible, responsive layouts using CSS Flexbox without writing custom CSS.
? Basic Flex Container
Add .d-flex to make an element a flex container:
<div class="d-flex"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div></div>? Flex Direction
Control the direction of flex items:
| Class | Description |
|---|---|
.flex-row | Default: horizontal row (left to right) |
.flex-row-reverse | Row reversed (right to left) |
.flex-column | Vertical column (top to bottom) |
.flex-column-reverse | Column reversed (bottom to top) |
Example:
<div class="d-flex flex-column"> <div>Item A</div> <div>Item B</div></div>?? Justify Content
Align items horizontally inside the container:
| Class | Effect |
|---|---|
.justify-content-start | Items aligned left (default) |
.justify-content-center | Items centered horizontally |
.justify-content-end | Items aligned right |
.justify-content-between | Items spaced with space between |
.justify-content-around | Items spaced with space around |
.justify-content-evenly | Items spaced evenly |
Example:
<div class="d-flex justify-content-center"> <div>Centered item</div></div>?? Align Items (Cross Axis)
Align items vertically (if flex-row) or horizontally (if flex-column):
| Class | Effect |
|---|---|
.align-items-start | Align to start |
.align-items-center | Align center |
.align-items-end | Align end |
.align-items-baseline | Align baseline |
.align-items-stretch | Stretch to container height (default) |
Example:
<div class="d-flex align-items-center" style="height: 100px;"> <div>Vertically centered</div></div>? Align Self (Individual Items)
Override alignment per flex item:
<div class="d-flex" style="height: 100px;"> <div class="align-self-start">Top</div> <div class="align-self-center">Center</div> <div class="align-self-end">Bottom</div></div>?? Flex Wrap
Control whether flex items wrap:
| Class | Effect |
|---|---|
.flex-nowrap | No wrapping (default) |
.flex-wrap | Wrap to next line |
.flex-wrap-reverse | Wrap in reverse order |
Example:
<div class="d-flex flex-wrap"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div></div>?? Flex Grow, Shrink, and Fill
.flex-grow-0or.flex-grow-1— toggle grow behavior..flex-shrink-0or.flex-shrink-1— toggle shrink behavior..flex-fill— grow to fill available space.
Example:
<div class="d-flex"> <div class="flex-grow-1">Grows to fill</div> <div>Fixed size</div></div>? Responsive Flex
All flex classes support breakpoints for responsiveness:
<div class="d-flex flex-column flex-md-row"> <div>Stacked on small, horizontal on md+</div> <div>Same</div></div>If you want, I can show examples of flex utilities combined with spacing, vertical centering tricks, or complex responsive flex layouts!
