Advertisement
Google Ad Slot: content-top
Bootstrap 5 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: Topb: Bottoms: 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 toautofor 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>