Overview sizes
- 0 = 0px
- 1 = 8px
- 2 = 16px
- 3 = 24px
- 4 = 32px
The following margin and padding options are available:
On all 4 sides
- .margin-0 / .padding-0
- .margin-1 / .padding-1
- etc.
On the left and right side
- .margin-h-0 / .padding-h-0
- .margin-h-1/ .padding-h-1
- etc.
On the top and bottom
- .margin-v-0 / .padding-v-0
- .margin-v-1 / .padding-v-1
- etc.
On the top
- .margin-top-0 / .padding-top-0
- .margin-top-1 / .padding-top-1
- etc.
On the bottom
- .margin-bottom-0 / .padding-bottom-0
- .margin-bottom-1 / .padding-bottom-1
- etc.
On the left side
- .margin-left-0 / .padding-left-0
- .margin-left-1 / .padding-left-1
- etc.
On the right side
- .margin-right-0 / .padding-right-0
- .margin-right-1 / .padding-right-1
- etc.
Breakpoint based examples
- .margin-sm-0 / .padding-sm-0
- .margin-md-h-1 / .padding-md-h-1
- .margin-lg-v-2 / .padding-lg-v-2
- .margin-xl-top-3 / .padding-xl-top-3
- .margin-ul-bottom-4 / .padding-ul-bottom-4
See further examples.
Responsive margins (resembling grid’s gutters)
- .margin-gutters / .padding-gutters
- .margin-h-gutters / .padding-h-gutters
- .margin-top-gutters / .padding-top-gutters
- .margin-left-gutters / .padding-left-gutters
- etc.
Negate margins on the bottom
- .margin-bottom-1--clear
- .margin-bottom-2--clear
- .margin-bottom-3--clear
- etc.