Bootstrap 5 Basic
Bootstrap 5 Flexbox
flex container enables a flexbox layout, which provides powerful and efficient ways to align and distribute space among items in the container, even when their sizes are dynamic or unknown.
Control the direction of flex items:
flex-{size?}-{direction}
flex: Indicates flex.size (optional): Responsive breakpoint (e.g., sm, md, lg, xl, xxl):direction : Defines the direction of the margin (e.g., row, row-reverse, column, column-reverse).Example:
.flex-row.flex-sm-row.flex-md-row.flex-lg-row.flex-xl-row.flex-xxl-row
Class |
Description |
|---|---|
|
flex-row |
Horizontal (default). |
|
flex-row-reverse |
Reverse horizontal. |
|
flex-column |
Vertical direction. |
|
flex-column-reverse |
Reverse vertical. |
Control whether flex items wrap onto multiple lines.
flex-{size?}-{type}
flex: Indicates flex.size (optional): Responsive breakpoint (e.g., sm, md, lg, xl, xxl):type : Defines the direction of the margin (e.g., wrap, wrap-reverse, nowrap).Example:
.flex-wrap.flex-sm-wrap.flex-md-wrap.flex-lg-wrap.flex-xl-wrap.flex-xxl-wrap
Class |
Description |
|---|---|
|
flex-wrap |
Wrap items onto a new line. |
|
flex-wrap-reverse |
Wrap in reverse. |
|
flex-nowrap |
Prevent wrapping. |
Align flex items horizontally along the main axis.
justify-content-{size?}-{type}
justify-content: Indicates justify-content.size (optional): Responsive breakpoint (e.g., sm, md, lg, xl, xxl):type : Defines the direction of the margin (e.g., start, end, center, between,around,evenly).Example:
.justify-content-start.justify-content-sm-start.justify-content-md-start.justify-content-lg-start.justify-content-xl-start.justify-content-xxl-start
Class |
Description |
|---|---|
|
justify-content-start |
Align items to the start. |
|
justify-content-end |
Align items to the end. |
|
justify-content-center |
Align items to the center. |
|
justify-content-between |
Space between items. |
|
justify-content-around |
Space around items. |
|
justify-content-evenly |
Space evenly items. |
Align items vertically along the cross-axis.
align-items-{size?}-{type}
align-items: Indicates align-items.size (optional): Responsive breakpoint (e.g., sm, md, lg, xl, xxl):type : Defines the direction of the margin (e.g., start, end, center, baseline,stretch).Example:
.align-items-start.align-items-sm-start.align-items-md-start.align-items-lg-start.align-items-xl-start.align-items-xxl-start
Class |
Description |
|---|---|
|
align-items-start |
Align to the start. |
|
align-items-end |
Align to the end. |
|
align-items-center |
Align to the center. |
|
align-items-baseline |
Align to the baseline. |
|
align-items-stretch |
Stretch items (default). |
Align items vertically along the cross-axis.
align-content-{size?}-{type}
align-content: Indicates align-content.size (optional): Responsive breakpoint (e.g., sm, md, lg, xl, xxl):type : Defines the direction of the margin (e.g., start, end, center, around,stretch).Example:
.align-content-start.align-content-sm-start.align-content-md-start.align-content-lg-start.align-content-xl-start.align-content-xxl-start
Class |
Description |
|---|---|
|
align-content-start |
Align rows at start. |
|
align-content-end |
Align rows at end. |
|
align-content-center |
Align rows at center. |
|
align-content-between |
Space between rows. |
|
align-content-around |
Space around rows. |
|
align-content-stretch |
Stretch rows. |
Add spacing between flex items using gap classes:
gap-{size}
gap: Indicates gap.size (optional): Responsive breakpoint (e.g., 0, 1, 2, 3, 4):
Class |
Description |
|---|---|
|
gap-0 |
0px |
|
gap-1 |
4px |
|
gap-2 |
8px |
|
gap-3 |
16px |
|
gap-4 |
24px |
|
gap-5 |
32px |