Bootstrap - Flex Utility Classes Part 3: Justifying Content with justify-content-*

Align Items on Main Axis

Use justify-content-* to control horizontal alignment (or vertical in column direction).

Example 5: Centre Items

<div class="d-flex justify-content-center">

  <div class="p-2 bg-primary">Center</div>

</div>

Explanation:

Items are centred within the flex container.

Example 6: Space Between

<div class="d-flex justify-content-between">

  <div class="p-2 bg-danger">Left</div>

  <div class="p-2 bg-success">Right</div>

</div>

Explanation:

Adds space between items, pushing them to opposite sides.

Example 7: Space Around

<div class="d-flex justify-content-around">

  <div class="p-2 bg-warning">1</div>

  <div class="p-2 bg-info">2</div>

</div>

Explanation:

Equal spacing is added to both sides of each item.