Padding and margin classes

Assign margin or padding to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. It uses Bootstrap 4 spacing format of {property}{sides}-{size}. Available sizes can be any of:

  • 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • 12, 16, 24
  • 15, 25, 35, 45
  • 120, 140, 160, 180
  • 100, 150, 200, 250, 300, 400, 500

Padding classes
Class name Description
.pt-40 padding-top: 40px
.pb-40 padding-bottom: 40px
.pl-40 padding-left: 40px
.pr-40 padding-right: 40px
.px-40 padding-left: 40px
padding-right: 40px
.py-40 padding-top: 40px
padding-bottom: 40px
.p-40 padding: 40px

Margin classes
Class name Description
.mt-40 margin-top: 40px
.mb-40 margin-bottom: 40px
.ml-40 margin-left: 40px
.mr-40 margin-right: 40px
.mx-40 margin-left: 40px
margin-right: 40px
.my-40 margin-top: 40px
margin-bottom: 40px
.m-40 margin: 40px

Gap items

These classes apply to a parent and make a horizontal gap between all immediate children by giving them margin-left and margin-right property.

Class name Gap size
.gap-items-1 4px
.gap-items-2 8px
.gap-items-3 or .gap-items 16px
.gap-items-4 24px
.gap-items-5 32px

Vertical and horizontal gap

Add .gap-y to any of .gap-items-* classes to have both vertical and horizontal gaps. These classes are meant to be use for parent that have a lot of children which break horizontal line and need space in vertical direction as well.