Bootstrap 5 Flex Align items
Bootstrap 5 Flex Align items to change the alignment of flex items on the cross-axis using align-items classes. The CSS align-items property sets the distribution of space between and around content items along a flexbox’s cross-axis or a grid’s block axis.
Bootstrap 5 Flex Align items classes:
- align-items-**: This class is used to align the items to the (**) position of the cross-axis.
- align-items-*-**: This class is used to align the items to the (**) position of the cross-axis for various (*) screen sizes.
Note: ‘*’ can be replaced by sm/md/lg/xl/xxl and ** can replace the “start”, “end”, “center”, “baseline”, “stretch”
Syntax:
<div class="d-flex align-items-start flex-row" ...>
<div class="border bg-light">
...
</div>
</div>
Example 1: In this example, we change the alignment of items to the start and the end of the cross-axis using align-items classes.
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 class = "m-2" >
< div class = "container text-center " >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h5 >Bootstrap 5 flex Align content</ h5 >
</ div >
< div class="d-flex align-items-start
flex-column border bg-light mb-4" style = "height:150px;" >
< div class = "border p-2 bg-success" >
Flex item1 Hello Geeks
</ div >
< div class = "border p-2 bg-primary" >
Flex item2 Hello Geeks
</ div >
< div class = "border p-2 bg-danger" >
Flex item3 Hello Geeks
</ div >
</ div >
< div class="d-flex align-items-end
flex-column border bg-light" style = "height:150px;" >
< div class = "border p-2 bg-info" >
Flex item1 Hello Geeks
</ div >
< div class = "border p-2 bg-secondary" >
Flex item2 Hello Geeks
</ div >
< div class = "border p-2 bg-warning" >
Flex item3 Hello Geeks
</ div >
</ div >
</ body >
|
Output:
Bootstrap 5 Flex Align items
Example 2: In this example, we change the alignment of items to the center and the stretch of the cross-axis using align-items classes.
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 class = "m-2" >
< div class = "container text-center " >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h5 >Bootstrap 5 flex Align content</ h5 >
</ div >
< div class="d-flex align-items-center
flex-column border bg-light mb-4"
style = "height: 160px;" >
< div class = "border p-2 bg-warning" >
Flex item1 Hello Geeks
</ div >
< div class = "border p-2 text-bg-success" >
Flex item2 Hello Geeks
</ div >
< div class = "border p-2 bg-info" >
Flex item3 Hello Geeks
</ div >
</ div >
< div class="d-flex align-items-stretch
flex-column border bg-light mb-4"
style = "height: 160px;" >
< div class = "border p-2 text-bg-secondary" >
Flex item1 Hello Geeks
</ div >
< div class = "border p-2 text-bg-primary" >
Flex item2 Hello Geeks
</ div >
< div class = "border p-2 text-bg-danger" >
Flex item3 Hello Geeks
</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Flex Align items
Reference: https://getbootstrap.com/docs/5.0/utilities/flex/#align-items
Last Updated :
21 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...