Open In App

Bootstrap5 Columns Margin Utilities

Improve
Improve
Like Article
Like
Save
Share
Report

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=
          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=
          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



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