Last updated
Bootstrap Color System
Bootstrap 5 uses a semantic color system with CSS custom properties (variables).
The core theme colors are defined as CSS variables on :root and
can be overridden in your own CSS. Bootstrap generates utility classes
(text-primary, bg-danger, border-success)
from these theme colors automatically.
Bootstrap 5 Theme Colors
| Name | Default Hex | CSS Variable |
|---|---|---|
| primary | #0d6efd | --bs-primary |
| secondary | #6c757d | --bs-secondary |
| success | #198754 | --bs-success |
| danger | #dc3545 | --bs-danger |
| warning | #ffc107 | --bs-warning |
| info | #0dcaf0 | --bs-info |
| light | #f8f9fa | --bs-light |
| dark | #212529 | --bs-dark |
Customizing Bootstrap Colors
SCSS
// Override Bootstrap theme colors BEFORE importing Bootstrap
$primary: #6f42c1; // purple
$secondary: #20c997; // teal
$success: #28a745;
$danger: #dc3545;
// Add custom theme colors
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"brand": #ff6b35, // custom color
);
@import "bootstrap/scss/bootstrap";