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= 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
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:
.png)
Bookstrap5 Columns Vertical Alignment
Reference: https://getbootstrap.com/docs/5.0/layout/columns/#vertical-alignment
Please Login to comment...