Bootstrap Justify Content

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!

Basic Alignment

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>

Space Distribution

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).

<!-- 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>