Bootstrap5 Columns Margin Utilities

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.

Output:

👁 Image

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

Output:

👁 Image

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