Padding and marginclasses
Assign marginor paddingto 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 |
Gapitems
These classes apply to a parent and make a horizontal gapbetween all immediate children by giving them margin-leftand margin-rightproperty.
| Class name | Gap size |
|---|---|
.gap-items-1 | 4px |
.gap-items-2 | 8px |
.gap-items-3or .gap-items | 16px |
.gap-items-4 | 24px |
.gap-items-5 | 32px |
Vertical and horizontal gap
Add .gap-yto 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.