The .justify-content classes in Bootstrap are used to control the alignment of flex items along the main axis of a flex container. They enable developers to specify how space is distributed between and around flex items, allowing for various alignment options.
Syntax:
<div class="d-flex justify-content-start">
<!-- Flex items with alignment -->
</div>
The table below illustrates the justify-content utility classes alongside their description.
| Class | Description |
|---|---|
.justify-content-start |
Align flex items at the start of the main axis. |
.justify-content-end |
Align flex items at the end of the main axis. |
.justify-content-center |
Centers flex items along the main axis. |
.justify-content-between |
Distributes flex items evenly along the main axis, with the first item at the start and the last item at the end. |
.justify-content-around |
Distributes flex items evenly along the main axis, with equal space around each item. |
Features:
- Provides flexibility in aligning and spacing flex items within a flex container.
- Allows developers to control the distribution of space between and around flex items along the main axis.
- Offers options to align flex items at the start, end, or centre of the main axis, as well as evenly distribute them with space between or around.
Ref: https://www.geeksforgeeks.org/bootstrap-5-flex-justify-content/amp/