Bootstrap 5 Flex Align items
Last Updated :
12 Apr, 2024
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.
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=
"https://cdn.jsdelivr.net/npm/[email protected]/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.
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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
Similar Reads
Bootstrap 5 Flex Align Self Bootstrap5 Flex Align Self property is used to change each item's alignment individually on the cross-axis. By default, it starts from the y-axis, if we want to change the alignment on the x-axis change the value of the class flex-direction to the column. There are some classes that can be used to s
3 min read
Bootstrap 5 Text Alignment Bootstrap 5 text alignment classes are used to realign components with the start, end, and center variation. It can be used in the same viewport width breakpoints as the grid system. iframe { width: 100%; height: 450px;} @media (max-width: 1145px) {.article--viewer .a-wrapper .content .text iframe {
2 min read
Bootstrap 5 Flex Auto margins with align-items Bootstrap 5 Flex Auto margins with align-items are used to place the flex items vertically on top or bottom of the container using the Bootstrap classes. Flex Auto margins with align-items used classes: align-items: This class is used to set the alignment of the flex items.flex-direction: This clas
2 min read
Bootstrap 5 Flex Auto margins with align-items Bootstrap 5 Flex Auto margins with align-items are used to place the flex items vertically on top or bottom of the container using the Bootstrap classes. Flex Auto margins with align-items used classes: align-items: This class is used to set the alignment of the flex items.flex-direction: This clas
2 min read
Bootstrap 5 Flex Align Content Bootstrap 5 Flex Align Content provides utilities for aligning flex items along the cross-axis. Options include start, end, center, around, and stretch, accommodating various layout requirements across different screen sizes. Bootstrap 5 Flex Align Content Classes: ClassDescriptionalign-content-star
2 min read
Bootstrap 5 Columns Alignment In bootstrap 5, we can use flexbox alignment utilities to align our columns horizontally and vertically without using CSS. The following are the possible alignment ways: Vertical alignment: For aligning the column vertically we use the flexbox utilities to get desired alignment system.Horizontal ali
2 min read