Open In App

Bootstrap 5 Flex Align items

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

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
Previous
Next
Share your thoughts in the comments
Similar Reads