CSS variables
Every component reads its styling from Bootstrap’s —bs-* custom
properties. Because they’re plain CSS variables, you can override them on any element
and the change cascades to that subtree — at runtime, with no re-render.
The surface
The provider emits the full Bootstrap token block on :root. There are two families:
- Global tokens — the theme colors and their derivatives (
--bs-primary,--bs-primary-rgb,--bs-primary-bg-subtle), the body/surface colors, borders, radii, shadows, spacing, z-index, and typography. - Component tokens — each component namespaces its own, e.g.
--bs-btn-bg,--bs-btn-color,--bs-alert-bg,--bs-card-cap-bg,--bs-badge-color.
Component tokens usually resolve from the global ones. A primary button, for example,
sets --bs-btn-bg: var(--bs-primary) — so overriding --bs-primary re-colors the
button without touching any button-specific variable.
Override on a subtree
Set a variable with an inline style (or any CSS rule) and it inherits down the DOM to
that subtree only. The demo below overrides --bs-primary on the second row — the
button and badge there turn pink, while the defaults above are untouched:
<div style={{ '--bs-primary': '#d63384' }}>
<Button variant="primary">Pink subtree</Button>
</div>This is the scoped counterpart to theming: a theme object re-skins the whole provider, while a CSS-variable override re-skins one region. No provider and no React state are involved — it’s the CSS cascade.
Component-token overrides
To restyle just one component family, override its component tokens rather than the
global color. This changes buttons without affecting badges, links, or anything else
that reads --bs-primary:
<div style={{
'--bs-btn-bg': '#6e2c92',
'--bs-btn-border-color': '#6e2c92',
'--bs-btn-hover-bg': '#5a2478',
}}>
<Button variant="primary">Custom button tokens</Button>
</div>Common global tokens
| Variable | Role |
|---|---|
| —bs-primary … —bs-dark | The eight contextual colors. |
| —bs-{color}-rgb | RGB triplet for rgba() / opacity utilities. |
| —bs-body-bg · —bs-body-color | Page surface and text (flip under dark mode). |
| —bs-border-color · —bs-border-width | Default border color and width. |
| —bs-border-radius (-sm/-lg/-pill) | Corner radii. |
| —bs-link-color · —bs-link-hover-color | Link colors (default to primary). |
| —bs-focus-ring-* | Focus-ring width, color, and opacity. |
Runtime updates
Because these are live CSS variables, you can write them from JavaScript and every component updates instantly — no re-render:
document.documentElement.style.setProperty('--bs-primary', '#6e2c92');For a typed, whole-app change, prefer a theme object; for scoped or dynamic tweaks, the CSS variables are the fastest path.