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.