You can use the classes .justify-content-start, .justify-content-center, and .justify-content-end to align the grid columns horizontally at the left, center and right of a container, respectively. Let’s check out the following example to see how it works:

Example

<div class="container">
    <div class="row justify-content-start">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
    <div class="row justify-content-center">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
    <div class="row justify-content-end">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
</div>

Alternatively, you can use the class .justify-content-around to distribute grid columns evenly with half-size spaces on either end, whereas you can use the class .justify-content-between to distribute the grid columns evenly where the first column placed at the start and the last column placed at the end. Try out the following example to see how it actually works:

Example

<div class="container">
    <div class="row justify-content-around">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
    <div class="row justify-content-between">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
</div>