Bootstrap - Bootstrap CSS Variables and Custom Properties

Bootstrap CSS Variables and Custom Properties are modern styling features that allow developers to create flexible, reusable, and dynamic designs without repeatedly editing CSS files. Starting from Bootstrap 5, the framework introduced extensive support for CSS custom properties, making it easier to customize themes, colors, spacing, typography, and component behavior directly in the browser.

Understanding CSS Variables

CSS variables, also called custom properties, are reusable values stored in CSS. They are declared using the -- prefix and accessed using the var() function.

Example:

:root {
  --main-color: #0d6efd;
  --text-color: #212529;
}

Usage:

button {
  background-color: var(--main-color);
  color: var(--text-color);
}

In this example:

  • --main-color stores a reusable color value.

  • --text-color stores another reusable value.

  • The var() function retrieves the stored value.

Bootstrap uses this same mechanism internally to control many design elements.

Why Bootstrap Uses CSS Variables

Earlier versions of Bootstrap relied heavily on Sass variables. Although Sass variables are powerful, they are compiled during build time and cannot easily change dynamically in the browser.

CSS variables solve this problem because they:

  • Work directly in the browser

  • Allow live theme changes

  • Reduce repeated CSS code

  • Improve maintainability

  • Support dynamic user customization

  • Simplify dark mode implementation

Bootstrap combines Sass variables and CSS variables for maximum flexibility.

Bootstrap Root Variables

Bootstrap defines many global variables inside the :root selector.

Example:

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
}

The --bs- prefix stands for Bootstrap.

These variables become available throughout the entire webpage.

Using Bootstrap Variables in Your Project

You can directly use Bootstrap variables in custom CSS.

Example:

.custom-box {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  padding: 20px;
}

Here:

  • --bs-primary uses Bootstrap’s primary theme color

  • --bs-white uses Bootstrap’s white color variable

This keeps your design consistent with Bootstrap’s theme.

Customizing Bootstrap Colors

One major advantage of CSS variables is easy color customization.

Example:

:root {
  --bs-primary: #ff5722;
}

This changes Bootstrap’s primary color globally.

Buttons, links, alerts, and other components using the primary color will automatically update.

Example:

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

The button now uses the new orange shade.

Component-Level Variables

Bootstrap also defines variables for specific components.

Example for buttons:

.btn-primary {
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
}

This means developers can override button-specific properties without rewriting the entire component.

Example:

.custom-btn {
  --bs-btn-bg: purple;
  --bs-btn-border-color: darkpurple;
}

HTML:

<button class="btn custom-btn">
  Custom Button
</button>

This creates a customized Bootstrap button using variable overrides.

Dynamic Theme Switching

CSS variables make theme switching much easier.

Example Light Theme:

:root {
  --bg-color: white;
  --text-color: black;
}

Dark Theme:

.dark-mode {
  --bg-color: #121212;
  --text-color: white;
}

Usage:

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

JavaScript can dynamically add or remove the dark-mode class to switch themes instantly.

Bootstrap Dark Mode Support

Bootstrap 5.3 introduced improved color mode support using CSS variables.

Example:

<html data-bs-theme="dark">

Bootstrap automatically changes component colors based on the selected theme.

Available modes include:

  • Light

  • Dark

  • Auto

This system uses CSS variables internally to control colors dynamically.

CSS Variable Fallback Values

Bootstrap variables can include fallback values.

Example:

color: var(--custom-color, blue);

If --custom-color does not exist, the browser uses blue.

Fallbacks improve reliability and compatibility.

Responsive Design with Variables

CSS variables can also help create responsive layouts.

Example:

:root {
  --spacing: 10px;
}

@media (min-width: 768px) {
  :root {
    --spacing: 20px;
  }
}

Usage:

.container-box {
  padding: var(--spacing);
}

Spacing changes automatically based on screen size.

Advantages of Bootstrap CSS Variables

1. Faster Customization

Developers can quickly modify themes without editing large CSS files.

2. Improved Maintainability

Centralized variables reduce repetitive styling code.

3. Real-Time Updates

Styles can change dynamically using JavaScript.

4. Better Dark Mode Support

Theme switching becomes easier and cleaner.

5. Cleaner Code Structure

Variables improve readability and organization.

6. Reusable Design Tokens

The same values can be reused across components.

Difference Between Sass Variables and CSS Variables

Feature Sass Variables CSS Variables
Processed During Build Time Runtime
Dynamic Changes No Yes
Browser Access No Yes
JavaScript Interaction Limited Direct
Theme Switching Harder Easier

Bootstrap often combines both systems together.

Best Practices

Use Meaningful Names

Good:

--primary-color

Bad:

--x1

Avoid Overusing Variables

Only create variables for reusable values.

Organize Variables Centrally

Store variables inside :root whenever possible.

Maintain Naming Consistency

Use structured prefixes like:

--bs-
--theme-
--app-

Common Use Cases

Bootstrap CSS variables are commonly used for:

  • Theme customization

  • Dark mode systems

  • Branding

  • Dashboard styling

  • Dynamic UI personalization

  • Responsive spacing

  • Typography scaling

  • Animation control

Real-World Example

Example:

:root {
  --bs-primary: #4caf50;
  --card-radius: 15px;
}

.card {
  border-radius: var(--card-radius);
}

HTML:

<div class="card p-3">
  Bootstrap Card
</div>

This customizes both Bootstrap colors and component appearance.

Limitations of CSS Variables

Although powerful, CSS variables also have limitations:

  • Older browsers like Internet Explorer do not fully support them

  • Excessive variables may increase complexity

  • Debugging deeply nested variables can become difficult

However, modern browsers provide excellent support today.

Conclusion

Bootstrap CSS Variables and Custom Properties provide a modern approach to building customizable and scalable web interfaces. They allow developers to control themes, colors, spacing, and component styles dynamically without rewriting large amounts of CSS. Bootstrap’s adoption of CSS variables has made the framework more flexible, especially for dark mode support, responsive design, and real-time theme customization.

Understanding how Bootstrap uses CSS variables is essential for developers who want to create advanced, maintainable, and professional frontend applications efficiently.