Bootstrap5 Columns Margin Utilities
Last Updated :
09 Dec, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...