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
Share your thoughts in the comments
Please Login to comment...