Skip to content
Related Articles
Open in App
Not now

Related Articles

Bootstrap5 Columns Margin Utilities

Improve Article
Save Article
  • Last Updated : 09 Dec, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!