Margin classes - Bootstrap

Demo

For the best viewing experience, click the Edit on CodePen button in the top righthand corner of the Pen to open it in a new tab.

<p class="m-1 mx-2 my-3 mt-4 mb-md-5">Example paragraph.</p>

Bootstrap provides margin utility classes that allow you to quickly add different sized margins to your elements.

To apply margins to all 4 sides of an element, use the letter m with a dash and any number from 0 to 5:

<p class="m-5">Example paragraph.</p>

To target only the left and right sides of an element, use mx instead of m with any number from 0 to 5:

<p class="mx-5">Example paragraph.</div>

To target the top and bottom of an element, use my with any number from 0 to 5:

<p class="my-5">Example paragraph.</p>

To target only the top, bottom, left, or right side, use mt, mb, ml, or mr respectively with any number from 0 to 5:

<p class="mt-5">Example paragraph.</p>

To make any of the above classes responsive, add in the sm, md, lg, or xl breakpoints in the middle:

<p class="mt-md-5">Example paragraph.</p>

Recreate the HTML code from the Demo section in your index.html file. Then try using other margin classes.

Try changing the number on the end of the class. You can use the numbers 0 through 5.

Try targeting diffferent sides by replacing the letter t with the letters b, l, r, x, and y.

Try targeting different breakpoints by replacing the letters md with sm, lg, or xl. Try resizing the window to test the responsive classes.

Spacing from the Bootstrap Docs