Bootstrap Guide
Typography
Level 1
Level 2
Level 3
Level 4
Level 5
Level 6
Level 7 (P2)
Level 8 (P3)
Level 9
Sphinx of black quartz, judge my vow (200, Extra Light)
Sphinx of black quartz, judge my vow (300, Light)
Sphinx of black quartz, judge my vow (400, Normal)
Sphinx of black quartz, judge my vow (600, Semibold)
Sphinx of black quartz, judge my vow (700, Bold)
Spacing
Bootstrap spacing utilities use the Figma scale. Use .m-*, .p-*, .gap-*, .g-* with numbers 1–10.
| Figma | Px | Rem | Bootstrap classes | Example |
|---|---|---|---|---|
| S1 | 4px | 0.25rem | m-1 p-1 gap-1 | |
| S2 | 8px | 0.5rem | m-2 p-2 gap-2 | |
| S3 | 12px | 0.75rem | m-3 p-3 gap-3 | |
| S4 (Base) | 16px | 1rem | m-4 p-4 gap-4 | |
| S5 | 24px | 1.5rem | m-5 p-5 gap-5 | |
| S6 | 32px | 2rem | m-6 p-6 gap-6 | |
| S7 | 40px | 2.5rem | m-7 p-7 gap-7 | |
| S8 | 48px | 3rem | m-8 p-8 gap-8 | |
| S9 | 64px | 4rem | m-9 p-9 gap-9 | |
| S10 | 96px | 6rem | m-10 p-10 gap-10 |
Directional variants: mt-4 mb-4 ms-4 me-4 mx-4 my-4 (margin); pt-4 pb-4 etc. (padding). Row/column gap: g-4 gx-4 gy-4.
Buttons
Containers
In these examples:
- a blue background denotes the content box
- a green background denotes the padding box
- an orange background denotes margin.
A black border has been added to show the natural width of each container, before margins.
Container padding will change based on gutters if the .container is a child of .row.
Standard containers
Cactus Pattern Library: at 1920px viewport → 1576px container; at 1440px → 1296px. Scale: sm 366, md 679, lg 908, xl 1120, xxl 1296, xxxl 1576. See Bootstrap docs.
No container (for reference)
.container
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.container-fluid
Grid layouts (12-column)
Bootstrap's 12-column grid. Use .row + .col-* (e.g. col-4, col-md-6).
12 × col-1
col-3 + col-6 + col-3
col-4 × 3
col-6 × 2
col-12
Custom containers
Fixed-width containers: 100% until the breakpoint is reached, then the max-width from the scale (sm 366px, md 679px, etc.) at every larger breakpoint.