Bootstrap - Advanced Bootstrap Theming with CSS Custom Properties

Bootstrap has evolved significantly over the years, and one of its most powerful modern features is the use of CSS Custom Properties, commonly known as CSS Variables. Earlier versions of Bootstrap relied heavily on Sass variables, which required developers to compile Bootstrap whenever they wanted to customize colors, spacing, fonts, or other design elements. Bootstrap 5 introduced CSS custom properties, allowing many visual changes to be made directly in the browser without recompiling the framework. This makes Bootstrap theming more flexible, efficient, and easier to maintain.

CSS custom properties are variables defined in CSS using the -- prefix. These variables store reusable values that can be referenced throughout a stylesheet. Instead of manually changing multiple CSS rules, developers only need to update the value of a single variable. Every component that depends on that variable automatically reflects the new style.

Understanding CSS Custom Properties

A CSS custom property is declared inside a selector, most commonly within the :root selector so that it becomes globally available.

Example:

:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --font-size: 16px;
}

The variables can then be used throughout the stylesheet.

button {
    background-color: var(--primary-color);
    font-size: var(--font-size);
}

The var() function retrieves the value stored inside the custom property.

Bootstrap and CSS Variables

Bootstrap defines many CSS variables for commonly used design values. These include colors, typography, spacing, borders, shadows, and component-specific settings.

Examples include:

--bs-primary
--bs-secondary
--bs-success
--bs-danger
--bs-warning
--bs-info
--bs-light
--bs-dark

Instead of hardcoding colors into every component, Bootstrap references these variables.

For example, the primary button internally uses:

background-color: var(--bs-primary);

This means changing the value of --bs-primary changes the appearance of all primary buttons throughout the website.

Why Bootstrap Uses CSS Variables

Using CSS variables offers several important advantages.

Dynamic Updates

Developers can modify themes instantly without recompiling Bootstrap.

Easier Maintenance

A single variable change updates every component that references it.

Consistent Design

Using shared variables ensures colors, fonts, and spacing remain consistent across all pages.

Runtime Customization

Unlike Sass variables, CSS variables can be changed using JavaScript while the application is running.

Better Browser Support

Modern browsers fully support CSS variables, making them suitable for production websites.

Changing Bootstrap's Primary Color

Suppose you want your website to use a green theme instead of Bootstrap's default blue.

Default Bootstrap:

:root {
    --bs-primary: #0d6efd;
}

Customized version:

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

Every Bootstrap component using the primary color immediately changes to green.

This affects:

  • Buttons

  • Links

  • Progress bars

  • Badges

  • Pagination

  • Navigation elements

  • Form controls

  • Other primary-themed components

Creating a Complete Custom Theme

Developers often customize multiple variables together.

Example:

:root {
    --bs-primary: #4f46e5;
    --bs-secondary: #64748b;
    --bs-success: #16a34a;
    --bs-danger: #dc2626;
    --bs-warning: #f59e0b;
    --bs-info: #0ea5e9;
}

This creates an entirely new color palette without modifying Bootstrap's internal files.

Customizing Typography

Bootstrap also exposes typography-related variables.

Example:

:root {
    --bs-body-font-family: Arial, sans-serif;
    --bs-body-font-size: 18px;
    --bs-body-line-height: 1.7;
}

These variables affect the appearance of text across the entire website.

Developers can maintain consistent typography simply by changing these values.

Customizing Border Radius

Rounded corners are widely used in Bootstrap.

Bootstrap variables include:

--bs-border-radius
--bs-border-radius-sm
--bs-border-radius-lg

Example:

:root {
    --bs-border-radius: 20px;
}

Buttons, cards, forms, alerts, and many other components automatically adopt the new border radius.

Changing Shadows

Bootstrap includes predefined shadow variables.

Example:

:root {
    --bs-box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

Cards, modals, dropdowns, and other components using Bootstrap shadows immediately reflect the updated style.

Customizing Spacing

Bootstrap spacing utilities can also be influenced through variables.

Example:

:root {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem;
}

This changes the spacing between columns in the Bootstrap grid.

Component-Specific Variables

Bootstrap provides variables that apply only to certain components.

For example, buttons have their own variables.

--bs-btn-bg
--bs-btn-color
--bs-btn-border-color

Example:

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

This custom button adopts the specified colors without affecting other buttons.

Dark Mode Using CSS Variables

One of the biggest advantages of CSS variables is the ability to switch themes dynamically.

Example:

:root {
    --bs-body-bg: white;
    --bs-body-color: black;
}

Dark theme:

[data-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-color: white;
}

JavaScript can switch between themes by changing the data-theme attribute.

document.documentElement.setAttribute("data-theme", "dark");

This changes the entire website appearance instantly without reloading the page.

Using CSS Variables with JavaScript

JavaScript can directly modify Bootstrap variables at runtime.

Example:

document.documentElement.style.setProperty(
    '--bs-primary',
    '#ff5733'
);

The primary color changes immediately, demonstrating the flexibility of CSS variables for user-controlled themes.

Combining Sass Variables and CSS Variables

Bootstrap supports both Sass variables and CSS variables, each serving different purposes.

Sass Variables CSS Variables
Changed before compilation Changed after the page loads
Require recompiling Bootstrap No recompilation required
Suitable for permanent design changes Ideal for runtime customization
Cannot be modified with JavaScript Can be modified dynamically with JavaScript
Best for framework-level customization Best for user-selectable themes and dynamic styling

Using both together allows developers to define a strong base theme with Sass while enabling interactive theme changes with CSS variables.

Best Practices

  • Define global variables in the :root selector to ensure consistency across the application.

  • Use meaningful variable names and follow Bootstrap's naming conventions whenever possible.

  • Avoid hardcoding colors, fonts, and spacing values inside component styles; reference variables instead.

  • Test both light and dark themes to maintain readability and accessibility.

  • Ensure sufficient color contrast for users with visual impairments by following accessibility guidelines.

  • Group related variables, such as colors, typography, spacing, and shadows, to improve maintainability.

  • Leverage component-specific variables when customizing individual Bootstrap components instead of overriding entire stylesheets.

Advantages of Bootstrap CSS Variables

  • Instant theme switching without recompilation.

  • Centralized control over colors, fonts, spacing, and other design tokens.

  • Easier maintenance and improved consistency across projects.

  • Better support for dark mode and user personalization.

  • Dynamic styling through JavaScript for interactive applications.

  • Reduced code duplication by reusing variables throughout the stylesheet.

  • Improved scalability for large websites and enterprise applications.

Conclusion

Bootstrap's support for CSS custom properties provides a modern and efficient approach to theming. By storing design values such as colors, typography, spacing, borders, and shadows in reusable variables, developers can create consistent, maintainable, and highly customizable user interfaces. Unlike traditional Sass-based customization, CSS variables enable real-time updates, dynamic theme switching, and seamless dark mode implementation without recompiling the framework. As web applications increasingly demand personalization and responsive design systems, mastering Bootstrap's CSS custom properties has become an essential skill for building flexible, scalable, and professional front-end applications.