contact@example.com +1 5589 55488 55
Header
Primary Card

Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Secondary Card

Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Tertiary Card

Some quick example text to build on the card title and make up the bulk of the card's content.
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
Primary Secondary Tertiary
PlaceholderImage cap
Card title

Some quick example text to build on the card title.

Go somewhere
PlaceholderImage cap
Card title

Some quick example text to build on the card title.

Go somewhere
PlaceholderImage cap
Card title

Some quick example text to build on the card title.

Go somewhere
Header
Primary Card

Bulk of the card's content.

Header
Secondary Card

Bulk of the card's content.

Header
Tertiary Card

Bulk of the card's content.
Header
Primary Card

Bulk of the card's content.

Header
Secondary Card

Bulk of the card's content.

Header
Tertiary Card

Bulk of the card's content.
Header
Primary Card

Bulk of the card's content.

Header
Secondary Card

Bulk of the card's content.

Header
Tertiary Card

Bulk of the card's content.

Using the new colors

These new colors are accessible via CSS variables and utility classes—like --bs-primary-bg-subtle and .bg-primary-subtle—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color’s associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.

Example element with utilities
html 
<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
  Example element with utilities
</div>

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss file.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

All these colors are available as a Sass map, $theme-colors.

scss/_variables.scss 
$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);