Margin

With our Try it Yourself editor, you can edit the HTML code and view the result:In Bootstrap 5, the margin utility classes are used to control the spacing around elements.

Syntax:

m{side?}-{breakpoint?}-{size}

m: Indicates margin.
side: Specifies which side(s) the margin applies to:
t: Top
b: Bottom
s: Start (left in LTR, right in RTL)
e: End (right in LTR, left in RTL)
x: Horizontal (start and end)
y: Vertical (top and bottom)
No side specified: Applies to all sides.
breakpoint (optional): Responsive breakpoint (e.g., sm, md, lg, xl, xxl).
size: Defines the size of the margin:
0: No margin.
1: 0.25rem (4px).
2: 0.5rem (8px).
3: 1rem (16px).
4: 1.5rem (24px).
5: 3rem (48px).
auto: Sets the margin to auto for centering.

Example

<div class="m-3">This div has 1rem margin on all sides.</div>

<div class="m-0">This div has no margin.</div>

<div class="mt-2">This div has a 0.5rem margin on top.</div>

<div class="mb-4">This div has a 1.5rem margin at the bottom.</div>

<div class="mx-3">This div has a 1rem margin on both sides (left and right).</div>

<div class="my-0">This div has no margin on the top or bottom.</div>

<div class="m-md-5">This div has a larger margin on medium screens and above.</div>

<div class="mt-lg-2">This div has a small top margin on large screens and above.</div>

<div class="mt-3 me-2 mx-sm-auto">Custom margin combinations!</div>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.