WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Margin

~1 min read · Bootstrap
On this page
❮ Previous Next ❯

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
This div has 1rem margin on all sides.
This div has no margin.
This div has a 0.5rem margin on top.
This div has a 1.5rem margin at the bottom.
This div has a 1rem margin on both sides (left and right).
This div has no margin on the top or bottom.
This div has a larger margin on medium screens and above.
This div has a small top margin on large screens and above.
Custom margin combinations!
Try it yourself

❮ Previous Next ❯