Bootstrap CSS Horizontal Alignment Example

 HTML:

<div class="container-fluid">

    <div class="row">

        <h2>Bootstrap CSS Horizontal Alignment </h2>

        <div class="col-sm-3"><h2>Col 1</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto!</div>

        <div class="col-sm-3"><h2>Col 2</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto!</div>

        <div class="col-sm-3"><h2>Col 3</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto!</div>

    </div>

    <!-- justify-content-end Class -->

    <div class="row justify-content-end">

        <h2>justify-content-end Class </h2>

        <div class="col-sm-3"><h2>Col 1</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto!</div>

        <div class="col-sm-3"><h2>Col 2</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto!</div>

        <div class="col-sm-3"><h2>Col 3</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto!</div>

    </div>

    <!-- justify-content-between Class -->

    <div class="row justify-content-between">

        <h2>justify-content-between Class </h2>

        <div class="col-sm-3"><h2>Col 1</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto!</div>

        <div class="col-sm-3"><h2>Col 2</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto!</div>

        <div class="col-sm-3"><h2>Col 3</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto!</div>

    </div>

    <!-- justify-content-around Class -->

    <div class="row justify-content-around">

        <h2>justify-content-around Class </h2>

        <div class="col-sm-3 p-5"><h2>Col 1</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto!</div>

        <div class="col-sm-3 p-3"><h2>Col 2</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto!</div>

        <div class="col-sm-3 p-4"><h2>Col 3</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, architecto!</div>

    </div>

</div>

CSS:

.col-sm-3{

    border: 2px solid red;

}

.row{

    border: 2px solid green;

}

Output: