💡 Bootstrap 5 CSS Variables – Customize Themes the Modern Way

🧲 Introduction – What Are CSS Variables in Bootstrap 5?

Bootstrap 5 introduces native support for CSS custom properties (a.k.a. CSS variables), making it easier than ever to customize color schemes, spacing, typography, and more without diving deep into Sass or recompiling the framework.

🎯 In this guide, you’ll learn:

• What CSS variables are and how Bootstrap uses them
• How to override and create custom variables
• Practical examples for color, spacing, and dark mode customization
• Best practices for scalable and maintainable theming

---

🧬 What Are CSS Variables?

CSS variables are reusable property values defined with -- syntax and scoped via selectors like :root.

:root {
  --bs-primary: #0d6efd;
  --bs-body-bg: #fff;
  --bs-body-color: #212529;
}

🔍 Code Explanation:

• :root: Global scope, applied to the entire document
• --bs-primary: Bootstrap’s primary color
• Variables can be overridden locally or globally

---

📦 Common Bootstrap 5 CSS Variables

Category	Example Variable	Purpose
Colors	--bs-primary, --bs-danger	Themed utility colors
Spacing	--bs-gutter-x, --bs-spacing	Layout padding and margins
Typography	--bs-body-font-family, --bs-font-sans-serif	Global font control
Body styling	--bs-body-bg, --bs-body-color	Page background and text color
Borders	--bs-border-radius, --bs-border-color	Corner rounding and outlines

✅ Bootstrap 5 uses these variables throughout components, making them easy to customize with minimal CSS.

---

✏️ How to Override Bootstrap CSS Variables

You can redefine Bootstrap variables directly in your custom CSS or within a scoped element.

✅ Example: Override Global Colors

<style>
  :root {
    --bs-primary: #ff5722;
    --bs-body-bg: #f8f9fa;
    --bs-body-color: #333;
  }
</style>

🔍 Code Explanation:

• Overrides the default --bs-primary blue with a custom orange.
• Adjusts background and text color site-wide.
• No need to modify Bootstrap source files.

---

🧪 Example – Customizing Button Color with Variables

<style>
  :root {
    --bs-primary: #6610f2; /* Purple */
  }
</style>

<button class="btn btn-primary">Custom Themed Button</button>

🔍 Code Explanation:

• btn-primary pulls its background color from --bs-primary.
• Changing the variable value updates all instances of btn-primary.

---

🌓 Example – Dynamic Dark Mode Using Variables

<style>
  body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
  }

  :root {
    --bs-body-bg: #fff;
    --bs-body-color: #212529;
  }

  .dark-mode {
    --bs-body-bg: #212529;
    --bs-body-color: #f8f9fa;
  }
</style>

<script>
  document.body.classList.toggle('dark-mode');
</script>

🔍 Code Explanation:

• Uses var() to bind background and text to CSS variables.
• .dark-mode dynamically flips the theme using overrides.

---

🧰 Bootstrap Components Using Variables

Many Bootstrap components are tied to CSS variables internally:

• .btn-primary: Uses --bs-primary
• .card: Uses --bs-body-bg and --bs-body-color
• .alert-danger: Uses --bs-danger-bg-subtle and similar variants

✅ Themed Card Example:

<div class="card p-3" style="background-color: var(--bs-body-bg); color: var(--bs-body-color);">
  <h5 class="card-title">Themed Card</h5>
  <p class="card-text">This card inherits Bootstrap’s custom properties.</p>
</div>

---

🛠️ Best Practices for Using CSS Variables in Bootstrap 5

Practice	Why It’s Useful
Use :root for global overrides	Applies variables site-wide
Use var(--bs-*) consistently	Ensures compatibility with Bootstrap updates
Avoid hardcoded values	Makes your theme easier to maintain and update
Use media queries for modes	Dynamically switch themes with prefers-color-scheme
Use local scope when needed	For component-level custom theming

---

📌 Summary – Recap & Customization Tips

CSS variables in Bootstrap 5 give developers powerful theming capabilities without extra build steps. Whether you’re building custom themes, dark mode layouts, or scoped components, variables help you stay DRY and consistent.

🔍 Key Takeaways:

• Bootstrap 5 defines core theming via --bs-* variables
• You can override any variable in :root or scoped areas
• Use var() in your styles to stay compatible and dynamic
• Supports light/dark mode, utility theming, and live styling

⚙️ Ideal for dashboards, templates, and scalable design systems that need flexible styling.

---

❓ FAQs – Bootstrap 5 CSS Variables

❓ Can I override Bootstrap 5 colors without Sass?
✅ Yes. Just redefine --bs-primary, --bs-body-bg, etc., in your custom CSS.

---

❓ Are CSS variables responsive?
✅ Not directly, but you can combine them with media queries or utility classes.

---

❓ Do all Bootstrap utilities use CSS variables?
✅ Most do—especially colors, spacing, typography, and borders.

---

❓ Can I use CSS variables with JavaScript?
✅ Yes. Use document.documentElement.style.setProperty('--bs-primary', '#000') to update them dynamically.

---

❓ Are CSS variables better than Sass variables?
✅ CSS variables work at runtime and allow dynamic theming. Sass variables require recompilation.

---

Share Now :