Open In App

Bootstrap 5 Flex Justify Content

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Flex Justify content is used to change the alignment of flex items on the main axis. Using the justify-content, classes we can align the contents along the main axis by distributing the extra space as intended. we can also adjust the alignment of the flex items.

Bootstrap 5 Flex Justify Content Classes:

  • justify-content-start: This class is used to align the items to the start of the main axis for all screen sizes.
  • justify-content-end: This class is used to align the items to the end of the main axis for all screen sizes.
  • justify-content-center: This class is used to align the items to the center of the main axis for all screen sizes.
  • justify-content-between: This class is used to align the items to the between of the main axis for all screen sizes.
  • justify-content-around: This class is used to align the items around the main axis for all screen sizes.
  • justify-content-evenly: This class is used to align the 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>

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=
          rel="stylesheet">
    <script src=
    </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=
          rel="stylesheet">
    <script src=
    </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>


Output:

Bootstrap 5 Flex Justify content

Reference: https://getbootstrap.com/docs/5.0/utilities/flex/#justify-content



Last Updated : 15 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads