Bootstrap 5 Flex Justify Content

Last Updated : 10 Apr, 2024

Bootstrap 5 Flex Justify Content aligns items along the main axis, distributing space between or around them, facilitating flexible layouts and responsive design with various alignment options.

Bootstrap 5 Flex Justify Content Classes:

Class	Description
justify-content-start	Aligns items to the start of the main axis for all screen sizes.
justify-content-end	Aligns items to the end of the main axis for all screen sizes.
justify-content-center	Aligns items to the center of the main axis for all screen sizes.
justify-content-between	Aligns items between the start and end of the main axis for all screen sizes.
justify-content-around	Aligns items evenly spaced around the main axis for all screen sizes.
justify-content-evenly	Aligns items evenly on the main axis for all screen sizes.

Syntax: The * can be replaceable with start, end, center, between, around and evenly.

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

Examples of Bootstrap 5 Flex Justify Content

Example 1: In this example, we change the alignment of the elements on the main axis using justify-content-start and justify-content-end 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 Justify content </h5>
    </div>

    <div class="d-flex 
                justify-content-start 
                flex-row border">
        <div class="border p-2 bg-light">
            Flex item1
        </div>
        <div class="border p-2 bg-light">
            Flex item2
        </div>
        <div class="border p-2 bg-light">
            Flex item3
        </div>
    </div>
    <div class="d-flex 
                justify-content-end 
                flex-row border ">
        <div class="border p-2 bg-light">
            Flex item1
        </div>
        <div class="border p-2 bg-light">
            Flex item2
        </div>
        <div class="border p-2 bg-light">
            Flex item3
        </div>
    </div>
</body>

</html>

Output:

Bootstrap 5 Flex Justify content

Example 2: In this example, we change the alignment of the elements on the main axis using justify-content-center and justify-content-end 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 Justify content </h5>
    </div>

    <div class="d-flex 
                justify-content-center 
                flex-row border">
        <div class="border p-2 bg-light">
            Flex item1
        </div>
        <div class="border p-2 bg-light">
            Flex item2
        </div>
        <div class="border p-2 bg-light">
            Flex item3
        </div>
    </div>
    <div class="d-flex 
                justify-content-between 
                flex-row border">
        <div class="border p-2 bg-light">
            Flex item1
        </div>
        <div class="border p-2 bg-light">
            Flex item2
        </div>
        <div class="border p-2 bg-light">
            Flex item3
        </div>
    </div>
</body>

</html>