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.

Output:

👁 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.

Output:

👁 Bookstrap5 Columns Vertical Alignment

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