 |
VOOZH | about |
|
VOOZH | about |
Bootstrap 5 Flex Justify Content aligns items along the main axis, distributing space between or around them, facilitating flexible layouts and responsive design with various alignment options.
Bootstrap 5 Flex Justify Content Classes:
| Class | Description |
|---|---|
| justify-content-start | Aligns items to the start of the main axis for all screen sizes. |
| justify-content-end | Aligns items to the end of the main axis for all screen sizes. |
| justify-content-center | Aligns items to the center of the main axis for all screen sizes. |
| justify-content-between | Aligns items between the start and end of the main axis for all screen sizes. |
| justify-content-around | Aligns items evenly spaced around the main axis for all screen sizes. |
| justify-content-evenly | Aligns items evenly on the main axis for all screen sizes. |
Syntax: The * can be replaceable with start, end, center, between, around and evenly.
<div class="d-flex justify-content-*">
...
</div>Example 1: In this example, we change the alignment of the elements on the main axis using justify-content-start and justify-content-end classes.
Output:
Example 2: In this example, we change the alignment of the elements on the main axis using justify-content-center and justify-content-end classes.
Output:
