Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

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

Whereproperty is one of:

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

Wheresides 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 4 sides of the element

Wheresize is one of: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 & auto

Start building beautiful apps

Contact

369 ape view Avenue

Brooklyn, NY

369 ape view Avenue

Mon - Fri 9am - 5pm

+91 3929 3355

Brooklyn, NY

Subscribe

Latest Shape news, articles, and resources sent straight to your inbox every month.

We’ll never share your details. See our Privacy Policy

Made With by ThemeWagon