CSS Spacing

Margin and padding

Use the spacing utilities to give margin or padding values to an element or a subset of its sides. The spacing utilities have support for individual properties, all properties, and vertical and horizontal properties. Classes are made from a default Sass map that ranges from .5rem to 6rem, where 1rem is equivalent to 16px.

Example

<div class="row">
  <div class="col">
    <div class="border p-3-lg flex-item">Custom column padding</div>
  </div>
  <div class="col m-2">
    <div class="p-1 border flex-item">Custom column padding</div>
  </div>
</div>

To have spacing utilities inherit on all breakpoints, don't add a breakpoint abbreviation to them. If you wish to have spacing utilities on specific breakpoints, use sm, md, lg, and xl. Remember, every breakpoint above the one you specify will inherit the spacing, so be sure to keep that in mind (e.g., if added on sm, will also add spacing on md, lg, and xl).

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

• m — for classes that set margin
• p — for classes that set padding

Where sides is one of:

• t — for classes that set margin-top or padding-top
• b — for classes that set margin-bottom or padding-bottom
• l — for classes that set margin-left or padding-left
• r — for classes that set margin-right or padding-right
• x — for classes that set both *-left and *-right
• y — for classes that set both *-top and *-bottom
• blank — for classes that set a margin or padding on all four sides of the element

Where size is one of:

• 0 — for classes that eliminate the span, margin, or padding by setting it to 0
• 0_25 — (by default) for classes that set the margin or padding to 0.25rem or 4px
• 0_5 — (by default) for classes that set the margin or padding to 0.5rem or 8px
• 0_75 — (by default) for classes that set the margin or padding to 0.75rem or 12px
• 1 — (by default) for classes that set the margin or padding to 1rem or 16px
• 1_5 — (by default) for classes that set the margin or padding to 1.5rem or 24px
• 2 — (by default) for classes that set the margin or padding to 2rem or 32px
• 2_5 — (by default) for classes that set the margin or padding to 2.5rem or 40px
• 3 — (by default) for classes that set the margin or padding to 3rem or 48px
• 3_5 — (by default) for classes that set the margin or padding to 3.5rem or 56px
• 4 — (by default) for classes that set the margin or padding to 4rem or 64px
• 4_5 — (by default) for classes that set the margin or padding to 4.5rem or 72px
• 5 — (by default) for classes that set the margin or padding to 5rem or 80px
• 5_5 — (by default) for classes that set the margin or padding to 5.5rem or 88px
• 6 — (by default) for classes that set the margin or padding to 6rem or 96px
• auto - for classes that set the margin to auto

Gap

Gap utility classes let you control spacing between flex or grid children by applying them directly to the parent container — no need to add individual margins to each item. These utilities are responsive by default and follow our spacing scale, making it easy to maintain consistent layouts across breakpoints.

Usage

Use these classes to set consistent gaps across rows and columns, or just one direction. Replace * with a spacing size (e.g., 0, 1, 2, 3, 4, 5, etc.), and {breakpoint} with a responsive prefix (sm, md, lg, xl).

• g-* — Sets both row and column gap to *
• g-{breakpoint}-{size} — Sets both row and column gap at a specific breakpoint
• gx-* — Sets horizontal (column) gap to *
• gx-{breakpoint}-{size} — Sets horizontal gap at a specific breakpoint
• gy-* — Sets vertical (row) gap to *
• gy-{breakpoint}-{size} — Sets vertical gap at a specific breakpoint

Example

<div className="d-flex flex-row g-3">
  <div className="flex-item p-3 border">Item 1</div>
  <div className="flex-item p-3 border">Item 2</div>
  <div className="flex-item p-3 border">Item 3</div>
</div>