Spacing
The Rivet equvalent for this component is available here for comparison.
Rivet-Bootstrap fully utilizes the Bootstrap spacing utilities without modifications to the existing Bootstrap class names, and with the addition of -6 and -7 suffix classes in order to align with the additional larger sizes offered in Rivet. For full documentation and code examples, please refer to the Bootstrap spacing documentation.
Padding examples
In these examples, padding classes are applied to the outer (light grey) container.
| CSS suffix | rem | px | Example |
|---|---|---|---|
-0 |
0rem | 0px | .p-0
|
-1 |
.25rem | 4px | .p-1
|
-2 |
.5rem | 8px | .p-2
|
-3 |
1rem | 16px | .p-3
|
-4 |
1.5 rem | 24px | .p-4
|
-5 |
2rem | 32px | .p-5
|
-6 |
2.5rem | 40px | .p-6
|
-7 |
4rem | 64px | .p-7
|
Margin examples
In these examples, margin classes are applied to the inner (blue) container.
| CSS suffix | rem | px | Example |
|---|---|---|---|
-0 |
0rem | 0px | .m-0
|
-1 |
.25rem | 4px | .m-1
|
-2 |
.5rem | 8px | .m-2
|
-3 |
1rem | 16px | .m-3
|
-4 |
1.5 rem | 24px | .m-4
|
-5 |
2rem | 32px | .m-5
|
-6 |
2.5rem | 40px | .m-6
|
-7 |
4rem | 64px | .m-7
|