Once you arrange elements inside a .d-flex container, you must dictate exactly how they align along the Main Axis (which is horizontal by default). This is exclusively managed by the justify-content utilities!
These three classes cover the absolute basics of pushing items against walls. By default, items align to the start of the container naturally.
<!-- Perfectly center items inside a container! -->
<div class="d-flex justify-content-center">
<div>Menu Link 1</div>
<div>Menu Link 2</div>
</div>
<!-- Push all items to the far right! -->
<div class="d-flex justify-content-end">...</div>Bootstrap includes three specialized justification classes designed specifically to distribute "empty space" perfectly among child elements. These are the most common tools for designing UI layouts like Navigation Bars.
.justify-content-between: Glues the first item to the left wall, glues the last item to the right wall, and divides the remaining space equally between elements!.justify-content-around: Gives every single element an equal, invisible "bubble" of space around it. (Notice the gaps touching the walls are half the size of the gaps between the middle items!).justify-content-evenly: Makes the physical gap distances perfectly identical everywhere (left wall gap = middle gap = right wall gap).Used constantly for Navigation Bars (Logo on the left, Links on the right).
<!-- The classic Navbar alignment! -->
<div class="d-flex justify-content-between">
<div>Brand Logo</div>
<div>Login</div>
</div>
<!-- Creating an equally distributed button layout -->
<div class="d-flex justify-content-evenly">
<button>Accept</button>
<button>Decline</button>
<button>Review</button>
</div>justify-content controls alignment along the main axis (horizontal by default); align-items controls the cross axis (vertical by default) — mixing these up is one of the most common flexbox mistakes.
.d-flex (or a responsive variant like .d-md-flex).
.justify-content-evenly if you want truly equal spacing everywhere.
A second example — a realistic navbar-style layout combining justify-content-between with flex-wrap for small screens:
<div class="d-flex flex-wrap justify-content-between align-items-center p-3 bg-light">
<span class="fw-bold">My Brand</span>
<div>
<a href="#" class="me-3">Home</a>
<a href="#" class="me-3">About</a>
<a href="#">Contact</a>
</div>
</div>Q: Can justify-content classes be responsive?
A: Yes — add a breakpoint infix, like .justify-content-md-between, to change the alignment only at that breakpoint and above.
Q: What's the difference between around and evenly?
A: .justify-content-around gives each item equal space on both sides, so edge items appear to have half the gap of middle items; .justify-content-evenly makes every gap, including the edges, exactly equal.
Q: Does justify-content work on a grid row too?
A: The grid system's .row uses a different alignment mechanism — use .justify-content-* only inside a genuine .d-flex container. See the official Flexbox utilities documentation for the full class list.