Bootstrap5 Columns Margin Utilities

Last Updated : 23 Jul, 2025

Bootstrap5 Columns Margin utilities are used to put some margin between the sibling elements such that it pushes the sibling elements away from their position.

Margin utility classes:

  • .m*-auto: This class is used to separate sibling columns

Syntax: 

  <div class=" m*-auto">
      ...
  </div>

The '*' can be replaced by e/s/x/y/l/r to set the margin from the end/start/horizontal axis/vertical axis/left/right respectively.

Example 1:  In this example, the margin utility's me-auto class has been used.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
          crossorigin="anonymous">
</head>

<body>
    <h1 class="text-success"> 
        GeeksforGeeks
    </h1>
    <h3>
          BootStrap 5 margin utility
    </h3>
    <section class="container">
        <section class="row">
            <section class="col-md-4 me-auto border bg-primary">
                GFG
            </section>
            <section class="col-md-4 border bg-secondary">
                GFG
            </section>
        </section>
    </section>
</body>

</html>

Output:

 

Example 2:  In this example, margin utility's me-auto, my-auto, and mx-auto class have been used.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
          crossorigin="anonymous">
    
</head>

<body>
    <h2 class="text-success"> 
        GeeksforGeeks
    </h2>
    <h3>
          BootStrap 5 margin utility
      </h3>
    <section class="container">
        <section class="row">
            <section class="col-md-4  my-auto border bg-primary">
                GFG
            </section>
            <section class="col-md-4 border bg-info">
                GFG
            </section>
        </section>
        <br>
        <section class="row">
            <section class="col-md-4  mx-auto border bg-danger">
                GFG
            </section>
            <section class="col-md-4 border bg-warning">
                GFG
            </section>
        </section>
        <br>
        <section class="row">
            <section class="col-md-4  me-auto border bg-success">
                GFG
            </section>
            <section class="col-md-4 border bg-secondary">
                GFG
            </section>
        </section>
    </section>
</body>

</html>

Output:

 

Reference: https://getbootstrap.com/docs/5.0/layout/columns/#margin-utilities

Comment

Explore