VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-flex-align-items/

⇱ Bootstrap 5 Flex Align items - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Flex Align items

Last Updated : 23 Jul, 2025

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 ClassDescription
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.

Output:

👁 align-tem3
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.

Output: 


👁 align-item2
Bootstrap 5 Flex Align items Example Output


Comment

Explore