Bootstrap 5 Flex Align Content

Last Updated : 26 Apr, 2024

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:

Class	Description
align-content-start	Aligns content to the start of the cross-axis for all screen sizes.
align-content-end	Aligns content to the end of the cross-axis for all screen sizes.
align-content-center	Aligns content to the center of the cross-axis for all screen sizes.
align-content-around	Aligns content around the cross-axis for all screen sizes.
align-content-stretch	Aligns content to stretch across the cross-axis for all screen sizes.

Syntax:

 <div class="d-flex flex-wrap align-content-*">
   ...  
</div>

Example 1: In this example, we align the content to the start and the center of the cross-axis using align content 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/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>
    <div class="container text-center ">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap 5 flex Align content</h5>
    </div>

    <div class="d-flex 
                flex-column 
                bd-highlight 
                mb-3 
                flex-wrap 
                align-content-start">
        <div class="border p-2 bd-highlight">
            Flex item 1 Hello Geeks wellcome
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 2 Hello Geeks wellcome
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 3 Hello Geeks wellcome
        </div>
    </div>

    <div class="d-flex 
                flex-column 
                bd-highlight 
                mb-3 
                flex-wrap 
                align-content-center">
        <div class="border p-2 bd-highlight">
            Flex item 1 Hello Geeks wellcome
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 2 Hello Geeks wellcome
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 3 Hello Geeks wellcome
        </div>
    </div>

</body>
</html>

Output:

Example 2: In this example, we align the content to the around and the end of the cross axis using align content 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/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>
    <div class="container text-center ">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap 5 flex Align content</h5>
    </div>

    <div class="d-flex 
                flex-column 
                bd-highlight 
                mb-3 
                flex-wrap 
                align-content-around">
        <div class="border p-2 bd-highlight">
            Flex item 1 Hello Geeks wellcome
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 2 Hello Geeks wellcome
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 3 Hello Geeks wellcome
        </div>
    </div>

    <div class="d-flex 
                flex-column 
                bd-highlight 
                mb-3 
                flex-wrap 
                align-content-end">
        <div class="border p-2 bd-highlight">
            Flex item 1 Hello Geeks wellcome
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 2 Hello Geeks wellcome
        </div>
        <div class="border p-2 bd-highlight">
            Flex item 3 Hello Geeks wellcome
        </div>
    </div>

</body>

</html>