Colors
A set of nice, accessible colors.
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
--bs-gray-100
--bs-gray-200
--bs-gray-300
--bs-gray-400
--bs-gray-500
--bs-gray-600
--bs-gray-700
--bs-gray-800
--bs-gray-900
--bs-gray-dark
--bs-gray
| Description | Swatch | Variables |
|---|---|---|
| Body — Default foreground (color) and background, including components. |
|
--bs-body-color--bs-body-color-rgb
|
|
|
--bs-body-bg--bs-body-bg-rgb
|
|
Secondary — Use the color option for lighter text. Use the bg option for
dividers and to indicate disabled component states.
|
|
--bs-secondary-color--bs-secondary-color-rgb
|
|
|
--bs-secondary-bg--bs-secondary-bg-rgb
|
|
Tertiary — Use the color option for even lighter text. Use the bg option to
style backgrounds for hover states, accents, and wells.
|
|
--bs-tertiary-color--bs-tertiary-color-rgb
|
|
|
--bs-tertiary-bg--bs-tertiary-bg-rgb
|
|
| Emphasis — For higher contrast text. Not applicable for backgrounds. |
|
--bs-emphasis-color--bs-emphasis-color-rgb
|
Border — For component borders, dividers, and rules. Use --bs-border-color-translucent
to blend with backgrounds with an rgba() value.
|
|
--bs-border-color--bs-border-color-rgb
|
| Primary — Main theme color, used for hyperlinks, focus styles, and component and form active states. |
|
--bs-primary--bs-primary-rgb
|
|
|
--bs-primary-bg-subtle
|
|
|
|
--bs-primary-border-subtle
|
|
|
Text
|
--bs-primary-text-emphasis
|
|
| Success — Theme color used for positive or successful actions and information. |
|
--bs-success--bs-success-rgb
|
|
|
--bs-success-bg-subtle
|
|
|
|
--bs-success-border-subtle
|
|
|
Text
|
--bs-success-text-emphasis
|
|
| Danger — Theme color used for errors and dangerous actions. |
|
--bs-danger--bs-danger-rgb
|
|
|
--bs-danger-bg-subtle
|
|
|
|
--bs-danger-border-subtle
|
|
|
Text
|
--bs-danger-text-emphasis
|
|
| Warning — Theme color used for non-destructive warning messages. |
|
--bs-warning--bs-warning-rgb
|
|
|
--bs-warning-bg-subtle
|
|
|
|
--bs-warning-border-subtle
|
|
|
Text
|
--bs-warning-text-emphasis
|
|
| Info — Theme color used for neutral and informative content. |
|
--bs-info--bs-info-rgb
|
|
|
--bs-info-bg-subtle
|
|
|
|
--bs-info-border-subtle
|
|
|
Text
|
--bs-info-text-emphasis
|
|
| Light — Additional theme option for less contrasting colors. |
|
--bs-light--bs-light-rgb
|
|
|
--bs-light-bg-subtle
|
|
|
|
--bs-light-border-subtle
|
|
|
Text
|
--bs-light-text-emphasis
|
|
| Dark — Additional theme option for higher contrasting colors. |
|
--bs-dark--bs-dark-rgb
|
|
|
--bs-dark-bg-subtle
|
|
|
|
--bs-dark-border-subtle
|
|
|
Text
|
--bs-dark-text-emphasis
|