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:
| CSS Class | Description |
|---|---|
| align-items-** | Aligns the items to the ** position of the cross-axis. |
| align-items-*-** | Aligns 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>
Examples of Bootstrap 5 Flex Align items
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.
<!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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body class="m-2">
<div class="container text-center">
<h5>
Bootstrap 5 flex Align content
</h5>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 mb-4">
<div
class="d-flex align-items-start border bg-light"
style="height: 150px"
>
<div
class="border p-2 bg-success"
>
Flex item1 Hello Geeks
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div
class="d-flex align-items-end border bg-light"
style="height: 150px"
>
<div
class="border p-2 bg-info"
>
Flex item1 Hello Geeks
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 Flex Align items Example Output
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.
<!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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body class="m-2">
<div class="container text-center">
<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 Example Output