Spacing Classes
The UDS Bootstrap theme creates its own variables for vertical spacing, which get folded into the Bootstrap utility classes for margins, padding, etc. (ex. mb-2, for ‘margin bottom 2 units’). Each spacing unit in the UDS system is 8px, so that same mb-2 would be ‘margin bottom 16px’, for example. Here is a table showing all the spacing units defined in the SCSS files, and how many pixels and rem they equal.
Things to note:
- Sizes increase by 1/2 rem (8px) from 0 up to 10, then we start getting into larger jumps
- The standard spacing between content sections (particularly when you are switching background colors or patterns)is 6 on mobile (48px) and 12 on desktop (96px), so you’ll use those quite often to create padding/margins.
| Spacing Class | How many REM | How many pixels |
| 0 | 0 | 0 |
| 1 | 0.5 | 8 |
| 2 | 1 | 16 |
| 3 | 1.5 | 24 |
| 4 | 2 | 32 |
| 5 | 2.5 | 40 |
| 6 | 3 | 48 |
| 7 | 3.5 | 56 |
| 8 | 4 | 64 |
| 9 | 4.5 | 72 |
| 10 | 5 | 80 |
| 12 | 6 | 96 |
| 14 | 7 | 112 |
| 16 | 8 | 128 |
| 32 | 16 | 256 |
| 64 | 32 | 512 |
| ‘half’ | 0.25 | 4 |
| ‘base’ | 1 | 16 |