Contents
Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
Colors
Bootstrap colors ending in -rgb provide the red, green, blue values for use in rgb() and rgba() color modes. For example, rgba(var(--bs-secondary-bg-rgb), .5).
| 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 |
Color palette
Lime
- Lime100
- Lime200
- Lime300
- Lime400
- Lime500
- Lime600
- Lime700
- Lime800
- Lime900
- Lime1000
Red
- Red100
- Red200
- Red300
- Red400
- Red500
- Red600
- Red700
- Red800
- Red900
- Red1000
Orange
- Orange100
- Orange200
- Orange300
- Orange400
- Orange500
- Orange600
- Orange700
- Orange800
- Orange900
- Orange1000
Yellow
- Yellow100
- Yellow200
- Yellow300
- Yellow400
- Yellow500
- Yellow600
- Yellow700
- Yellow800
- Yellow900
- Yellow1000
Green
- Green100
- Green200
- Green300
- Green400
- Green500
- Green600
- Green700
- Green800
- Green900
- Green1000
Teal
- Teal100
- Teal200
- Teal300
- Teal400
- Teal500
- Teal600
- Teal700
- Teal800
- Teal900
- Teal1000
Blue
- Blue100
- Blue200
- Blue300
- Blue400
- Blue500
- Blue600
- Blue700
- Blue800
- Blue900
- Blue1000
Purple
- Purple100
- Purple200
- Purple300
- Purple400
- Purple500
- Purple600
- Purple700
- Purple800
- Purple900
- Purple1000
Magenta
- Magenta100
- Magenta200
- Magenta300
- Magenta400
- Magenta500
- Magenta600
- Magenta700
- Magenta800
- Magenta900
- Magenta1000
Light mode neutrals
Solid
- Neutral0
- Neutral100
- Neutral200
- Neutral300
- Neutral400
- Neutral500
- Neutral600
- Neutral700
- Neutral800
- Neutral900
- Neutral1000
- Neutral1100
Alpha
- Neutral100A
- Neutral200A
- Neutral300A
- Neutral400A
- Neutral500A
Dark mode neutrals
Solid
- DarkNeutral-100
- DarkNeutral0
- DarkNeutral100
- DarkNeutral200
- DarkNeutral250
- DarkNeutral300
- DarkNeutral400
- DarkNeutral500
- DarkNeutral600
- DarkNeutral700
- DarkNeutral800
- DarkNeutral900
- DarkNeutral1000
- DarkNeutral1100
Alpha
- DarkNeutral-100A
- DarkNeutral100A
- DarkNeutral200A
- DarkNeutral250A
- DarkNeutral300A
- DarkNeutral350A
- DarkNeutral400A
- DarkNeutral500A
Edit this page on Github
Last updated on April 6, 2024