Edit page

Spacing

Responsive spacing helper classes enable to simply add or modify margin and padding properties where necessary.

Naming System

The classes are named using the format [property][sides]-[size] for xs and [property][sides]-[breakpoint]-[size] for sm, md, lg, xl, xxl, and xxxl breakpoints.

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

Where size is one of:

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • auto for classes that set the margin to auto

👉 Check the spacing scale to see the exact values of individual sizes.

Examples

Example of the margin-bottom property applied for all viewport sizes:

.mb-0
.mb-1
.mb-2
.mb-3
.mb-4
.mb-5
.mb-6
.mb-7

Example of the padding-left property applied from sm breakpoint up:

.pl-sm-0
.pl-sm-1
.pl-sm-2
.pl-sm-3
.pl-sm-4
.pl-sm-5
.pl-sm-6
.pl-sm-7