Body text
$body-color
Default text color
Primary
$primary · --bs-primary
Buttons, links, active states
Bootstrap
29 official semantic tokens
29 colors
About Bootstrap
Bootstrap centers its color system on semantic theme colors such as $primary, $secondary, and $success, plus a grayscale ramp from gray-100 to gray-900 defined in _variables.scss.
How to use
Override SCSS variables or extend $custom-colors to generate new utilities. Apply them with the .bg-*, .text-*, and .border-* helper classes in your markup.
Secondary
$secondary · --bs-secondary
Secondary buttons and muted UI
Success
$success · --bs-success
Positive actions and alerts
Danger
$danger · --bs-danger
Destructive actions and errors
Warning
$warning · --bs-warning
Warning alerts and badges
Info
$info · --bs-info
Informational alerts
Light
$light · --bs-light
Light gray component background
Dark
$dark · --bs-dark
Dark component background
Blue
$blue
Base theme color, aliased by $blue
Indigo
$indigo
Base theme color, aliased by $indigo
Purple
$purple
Base theme color, aliased by $purple
Pink
$pink
Base theme color, aliased by $pink
Red
$red
Base theme color, aliased by $red
Orange
$orange
Base theme color, aliased by $orange
Yellow
$yellow
Base theme color, aliased by $yellow
Green
$green
Base theme color, aliased by $green
Teal
$teal
Base theme color, aliased by $teal
Cyan
$cyan
Base theme color, aliased by $cyan
Gray 100
$gray-100
Light gray for surfaces
Gray 200
$gray-200
Light gray for surfaces
Gray 300
$gray-300
Light gray for surfaces
Gray 400
$gray-400
Mid gray for borders and muted text
Gray 500
$gray-500
Mid gray for borders and muted text
Gray 600
$gray-600
Mid gray for borders and muted text
Gray 700
$gray-700
Dark gray for text
Gray 800
$gray-800
Dark gray for text
Gray 900
$gray-900
Dark gray for text
Body background
$body-bg
Default page background
No matching colors
Source: Bootstrap v5.3.8 · _variables.scss