Background colors
Body colors
| Contrast level | Class |
|---|---|
| Text contrast higher | text-contrast-higher |
| Text contrast high | text-contrast-high |
| Text contrast medium | text-contrast-medium |
| Text contrast low | text-contrast-low |
| Text contrast lower | text-contrast-lower |
| Contrast level | class |
|---|---|
| Text contrast higher | text-contrast-higher |
| Text contrast high | text-contrast-high |
| Text contrast medium | text-contrast-medium |
| Text contrast low | text-contrast-low |
| Text contrast lower | text-contrast-lower |
Theme colors
text-primary
text-primary-emphasis
bg-primary
bg-primary-subtle
border-primary-subtle
text-accent
text-accent-emphasis
bg-accent
bg-accent-subtle
border-accent-subtle
text-success
text-success-emphasis
bg-success
bg-success-subtle
border-success-subtle
text-danger
text-danger-emphasis
bg-danger
bg-danger-subtle
border-danger-subtle
text-light
text-light-emphasis
bg-light
bg-light-subtle
border-light-subtle
text-dark
text-dark-emphasis
bg-dark
bg-dark-subtle
border-dark-subtle
Typography
display-1
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<h1>
Bootstrap heading 1
Bootstrap heading 2
Bootstrap heading 3
Bootstrap heading 4
Bootstrap heading 5
Bootstrap heading 6
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis numquam doloremque consequatur aliquid at consequuntur, tempora exercitationem tempore ea nihil. This is a link. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis numquam doloremque consequatur aliquid at consequuntur, tempora exercitationem tempore ea nihil.
<p class="lead">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, at?
Spacing
1
2
3
4
5
6
7
8
Avatars
Badges
Buttons
Shadows
Shapes
components/_shapes.scss
Curve horizontal 1
Curve horizontal 2
Curve horizontal 3
Angle horizontal 1
Wave horizontal 1
Curve vertical