Loading...
 
Skip to main content
(Cached)

Bootstrap Secondary and Tertiary Colors

This table is from https://getbootstrap.com/docs/5.3/customize/color/ and can be used to test these colors in each theme and color mode.

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


Page last modified on Tuesday 01 of July, 2025 06:18:10 GMT-0000