Color collection
Bootstrap 5 Colors
Bootstrap 5's full color system — 8 semantic theme colors and 11 palettes with 9 shades each (100–900). Used in millions of websites worldwide.
About Bootstrap colors
Bootstrap 5 ships with two color layers. The semantic theme colors — primary, secondary, success, info, warning, danger, light, and dark — drive the component API (btn-primary, alert-danger etc.) and are what most developers interact with daily.
Underneath those, Bootstrap also exposes a full color palette of 10 hues (blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan) plus a gray scale, each running from 100 to 900. These raw palette values are used to derive the semantic colors and are available as SCSS variables and CSS custom properties.
Using Bootstrap colors in CSS
/* Semantic utility classes */
<button class="btn btn-primary">Save</button>
<div class="alert alert-danger">Error</div>
/* CSS custom properties (Bootstrap 5.2+) */
color: var(--bs-primary);
background: var(--bs-danger-bg-subtle);
<button class="btn btn-primary">Save</button>
<div class="alert alert-danger">Error</div>
/* CSS custom properties (Bootstrap 5.2+) */
color: var(--bs-primary);
background: var(--bs-danger-bg-subtle);