Bootstrap CSS Variables

Bootstrap CSS Variables Overview

Bootstrap 5 defines global custom properties like --bs-primary, --bs-border-radius, and --bs-font-sans-serif on the :root selector, and many components expose their own scoped variables, such as --bs-btn-bg on buttons or --bs-card-border-radius on cards, following the pattern --bs-{component}-{property}.

Because these are real CSS custom properties, you can override them directly in your own stylesheet, inline in a style attribute, or dynamically through JavaScript, without recompiling any Sass, making them ideal for runtime theming, user-customizable interfaces, or quick experiments.

Bootstrap CSS Variables Example

<style>
  :root {
    --bs-primary: #7c3aed;
    --bs-border-radius: 0.75rem;
  }

  .card.featured {
    --bs-card-border-radius: 1.25rem;
    --bs-card-border-color: var(--bs-primary);
  }
</style>

<div class="card featured p-3">Featured card with a custom radius and border color.</div>

<script>
  document.documentElement.style.setProperty("--bs-primary", "#0ea5e9");
</script>

Overriding --bs-primary and --bs-border-radius on :root changes those values everywhere Bootstrap's compiled CSS references them, without touching a single Sass file. The featured card scopes its own variable overrides locally, changing only that card's radius and border color. The script demonstrates changing a variable dynamically, for example in response to a user picking a theme color.

Top 10 Bootstrap CSS Variables Examples

These are the CSS variable patterns you'll use for runtime theming and quick component overrides.

Popular Real-World Bootstrap CSS Variables Examples

These CSS variable patterns are common for live theme switchers, dark mode, and per-component styling.

Best Practices

• Use CSS variable overrides for quick or runtime theming that doesn't justify a Sass rebuild.
• Scope overrides to a specific component or section instead of always touching :root when possible.
• Combine data-bs-theme with variable overrides for coordinated light/dark theme switching.
• Use JavaScript's setProperty for dynamic, user-driven theming like a color picker.
• Keep a short reference list of which --bs-* variables exist for components you customize often.
• Prefer CSS variables over !important overrides when adjusting a single component instance.
• Test variable overrides in both light and dark modes if your site supports data-bs-theme.

Common Mistakes

• Assuming every visual property is exposed as a CSS variable; some still require a Sass rebuild to change.
• Overriding :root globally when a scoped, component-level override would have been safer.
• Forgetting the --bs- prefix, so the override silently does nothing.
• Not checking Bootstrap's documentation for the exact variable name a component actually uses.
• Mixing conflicting overrides between global :root and a specific component without understanding CSS specificity.
• Overriding variables without testing across both data-bs-theme="light" and "dark".

Key Takeaways

• Bootstrap 5 exposes global and component-scoped CSS custom properties prefixed with --bs-.
• These variables can be overridden in CSS, inline styles, or dynamically via JavaScript.
• Scoped overrides target a single component without affecting the whole site.
• data-bs-theme works alongside CSS variables to support light/dark theming.
• CSS variables are the fastest customization path when a full Sass rebuild isn't necessary.