Bootstrap 5 Columns Vertical Alignment
Last Updated :
19 Jan, 2023
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:
Bookstrap5 Columns Vertical Alignment
Reference: https://getbootstrap.com/docs/5.0/layout/columns/#vertical-alignment
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...