Open In App

Bootstrap 5 Columns Vertical Alignment

Improve
Improve
Like Article
Like
Save
Share
Report

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=
          rel="stylesheet">
    <script src=
    </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:

Bookstrap5 Columns Vertical Alignment

Bookstrap5 Columns Vertical Alignment

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=
          rel="stylesheet">
    <script src=
    </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:

Bookstrap5 Columns Vertical Alignment

Bookstrap5 Columns Vertical Alignment

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



Last Updated : 19 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads