Bootstrap 5 Columns Horizontal Alignment

Bootstrap5 Columns Horizontal alignment is used to align the columns horizontally so that we can define how the columns will be displayed in a single line.

Column Horizontal Alignment classes used:

justify-content-start: This class is used to align columns from start.
justify-content-center: This class is used to align columns from the center.
justify-content-end: This class is used to align columns in the end.
justify-content-around: This class is used to make equal spacing between 2 columns.
justify-content-between: This class is used to add space between the columns elements.
justify-content-evenly: This class is used to make equal spacing between right and left of 2 columns.

Syntax:

<div class="row justify-content-*">
    <div class="col-4">
        ...
    </div>
    <div class="col-4">
        ...
    </div>
</div>

Example 1: In this example, we will learn about horizontal alignment from start and center.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <title>Columns Horizontal alignment</title>
</head>

<body>
    <div class="container text-center col-8 ">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap5 Columns Horizontal alignment
        </h2>
        <div class="row justify-content-start 
                    text-white bg-success">
            <div class="col-2 mt-3">
                Start 1
            </div>
            <div class="col-2 mt-3">
                Start 2
            </div>
            <div class="col-2 mt-3">
                Start 3
            </div>
        </div>
        <div class="row justify-content-center 
                    bg-success text-white mt-3">
            <div class="col-2 mt-3">
                Center 1
            </div>
            <div class="col-2 mt-3">
                Center 2
            </div>
            <div class="col-2 mt-3">
                Center 3
            </div>
        </div>
    </div>
</body>

</html>

Output

Example 2: In this example, we will learn about horizontal alignment from the end and even alignment.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <title>Columns Horizontal alignment</title>
</head>

<body>
    <div class=" container text-center col-8 ">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap5 Columns Horizontal alignment
        </h2>
        <div class="row justify-content-end 
                    text-white bg-success">
            <div class="col-2 mt-3">
                End 1
            </div>
            <div class="col-2 mt-3">
                End 2
            </div>
            <div class="col-2 mt-3">
                End 3
            </div>
        </div>
        <div class="row justify-content-evenly 
                    bg-success text-white mt-3">
            <div class="col-2 mt-3">
                Even 1
            </div>
            <div class="col-2 mt-3">
                Even 2
            </div>
            <div class="col-2 mt-3">
                Even 3
            </div>
        </div>
    </div>
</body>

</html>

Output

Reference: https://getbootstrap.com/docs/5.0/layout/columns/#horizontal-alignment

Bootstrap 5 Columns Horizontal Alignment

Explore