Bootstrap 5 Flex Auto margins

Last Updated : 11 Nov, 2022

Bootstrap 5 has come up with the Flex property that allows developers to easily modify and arrange flex items. All the layouts of containers can be manipulated using the newly introduced Flex. The flex utility has many properties, the auto-margin is one of them.

Flex Auto margins used Classes:

.ms-auto: Margin start is denoted by the ‘ms’. We can easily add auto margins to flex items with .ms-auto which will push items to the right. The .ms-auto class is basically the margin-left to auto.
.me-auto: The ‘me’ represent margin-end. This type of auto margin, the me-auto used for pushing items to the left. The .me-auto class sets the value of margin-right to auto.

Syntax:

<div class="d-flex">
     <div class="*-auto"> Content... </div>
     ...
</div>

Example 1: In this example, we will use .d-flex and .ms-auto classes to place the flex items.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
      <title>Bootstrap 5 Flex Auto margins</title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <h1 class="text-success text-center"> 
        GeeksforGeeks 
    </h1> 
      
    <h2 class="text-center m-3"> 
        Bootstrap 5 Flex Auto margins 
    </h2> 
  
    <div class="d-flex bg-success m-2 text-white"> 
        <div class="m-1 border border-white"> 
            GeeksforGeeks 
        </div> 
          
        <div class="m-1 border border-white"> 
            GeeksforGeeks 
        </div> 
          
        <div class="m-1 border border-white"> 
            GeeksforGeeks 
        </div> 
    </div> 
  
    <div class="d-flex bg-success m-2 text-white"> 
        <div class="m-1 border border-white"> 
            GeeksforGeeks 
        </div> 
          
        <div class="m-1 border border-white"> 
            GeeksforGeeks 
        </div> 
          
        <div class="ms-auto m-1 border border-white"> 
            GeeksforGeeks 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will use .d-flex and .me-auto classes to place the flex items.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <h1 class="text-success text-center"> 
        GeeksforGeeks 
    </h1> 
      
    <h2 class="text-center m-3"> 
        Bootstrap 5 Flex Auto margins 
    </h2> 
  
    <div class="d-flex bg-success m-2 text-white"> 
        <div class="m-1 border border-white"> 
            GeeksforGeeks 
        </div> 
          
        <div class="m-1 border border-white"> 
            GeeksforGeeks 
        </div> 
          
        <div class="m-1 border border-white"> 
            GeeksforGeeks 
        </div> 
    </div> 
        
    <div class="d-flex bg-success m-2 text-white"> 
        <div class="me-auto m-1 border border-white"> 
            GeeksforGeeks 
        </div> 
          
        <div class="m-1 border border-white"> 
            GeeksforGeeks 
        </div> 
          
        <div class="m-1 border border-white"> 
            GeeksforGeeks 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Auto Margins with align-items: Auto Margin can also be used with the Align Items to vertically move items up or down. The .mb-auto class indicates that margin-bottom is set to auto, while .mt-auto class indicates margin-auto-top.

Example: In this example, we will use .d-flex, .align-items-start, and .align-items-end classes to place the flex items.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Bootstrap 5 Flex Auto Margin with Align Items 
    </title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <h1 class="text-success text-center"> 
        GeeksforGeeks 
    </h1> 
  
    <h2 class="text-center m-3"> 
        Bootstrap 5 Flex Auto Margin with Align Items 
    </h2> 
  
    <div class="d-flex align-items-start flex-column  
        bg-success m-3 text-white" style="height: 200px;"> 
        <div class="mb-auto p-2 border border-white m-1"> 
            GeeksforGeeks 
        </div> 
        <div class="p-2 border border-white m-1"> 
            GeeksforGeeks 
        </div> 
        <div class="p-2 border border-white m-1"> 
            GeeksforGeeks 
        </div> 
    </div> 
  
    <div class="d-flex align-items-end flex-column  
        bg-success m-3 text-white" style="height: 200px;"> 
        <div class="p-2 border border-white m-1"> 
            GeeksforGeeks 
        </div> 
          
        <div class="p-2 border border-white m-1"> 
            GeeksforGeeks 
        </div> 
          
        <div class="mt-auto p-2 border border-white m-1"> 
            GeeksForGeeks 
        </div> 
    </div> 
</body> 
  
</html>