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.