Bootstrap 5 Columns Vertical Alignment

Bootstrap 5 Columns Vertical alignment is used to change the alignment of the column's content in the vertical direction.

Bootstrap5 Columns Vertical alignment classes:

align-items-start: This class is used to align the column items to the start position.
align-items-center: This class is used to align the column items to the center position.
align-items-end: This class is used to align the column items to the end position.

Syntax:

<div class="row align-items-start" style="...">
    <div class="col">
        ....
    </div>
    <div class="col">
        ....
    </div>
    ....
</div>

Example 1: In this example, we change the alignment of column items to the start position using align-items-start class.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>
  
<body>
    <div class="container text-center ">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap5 Columns Vertical alignment</h5>
    </div>
    <div class="container">
        <div class="row align-items-start border bg-light" 
             style="height:120px;">
            <div class="col border p-2 text-bg-success">
                Hello Geeks
            </div>
            <div class="col border p-2 text-bg-info">
                Hello Geeks
            </div>
            <div class="col border p-2 text-bg-danger">
                Hello Geeks
            </div>
        </div>
    </div>
</body>

</html>

Output:

Example 2: In this example, we change the alignment of column items to the center and end position using align-items-center, align-items-end class.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container text-center ">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap5 Columns Vertical alignment</h5>
    </div>
    <div class="container">
        <div class="row align-items-center border bg-light" 
             style="height:120px;">
            <div class="col border p-2 text-bg-secondary">
                Hello Geeks
            </div>
            <div class="col border p-2 text-bg-primary">
                Hello Geeks
            </div>
            <div class="col border p-2 text-bg-dark">
                Hello Geeks
            </div>
        </div>
        <div class="row align-items-end border bg-light" 
             style="height:120px;">
            <div class="col border p-2 text-bg-info">
                Hello Geeks
            </div>
            <div class="col border p-2 text-bg-warning">
                Hello Geeks
            </div>
            <div class="col border p-2 text-bg-success">
                Hello Geeks
            </div>
        </div>
    </div>
</body>

</html>

Output:

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

Bootstrap 5 Columns Vertical Alignment

Explore