Customize Bootstrap

Customize Bootstrap Overview

There are three main levels of Bootstrap customization: overriding Sass variables before compiling (the most powerful and thorough approach), overriding the runtime CSS custom properties Bootstrap 5.3+ exposes on many components, and adding your own CSS on top of the compiled framework for one-off tweaks.

Choosing the right level depends on scope: Sass variables are ideal for site-wide theme changes like colors and fonts, CSS variables are great for quick runtime or per-component overrides, and plain custom CSS suits small, isolated adjustments that don't need to propagate everywhere.

Customize Bootstrap Example

// custom.scss — Sass variable overrides (most powerful)
$primary: #7c3aed;
$border-radius: 0.75rem;
$font-family-base: 'Inter', sans-serif;

@import 'bootstrap/scss/bootstrap';

/* Runtime CSS variable override (quick, no rebuild needed) */
.card {
  --bs-card-border-radius: 1rem;
}

Overriding Sass variables like $primary before importing Bootstrap regenerates every component and utility class that references that color, giving a consistent, site-wide result. The CSS variable override below it demonstrates a lighter-weight approach: changing a single component's border radius at runtime without recompiling Sass.

Top 10 Customize Bootstrap Examples

These are the customization entry points you'll use most often when adapting Bootstrap to a brand.

Popular Real-World Customize Bootstrap Examples

These customization patterns are common when adapting Bootstrap to match a specific brand identity.

Best Practices

• Override Sass variables before the @import 'bootstrap' line, since Bootstrap's source reads them in that order.
• Use CSS custom property overrides for quick, scoped tweaks that don't need a rebuild.
• Group all your variable overrides in one clearly labeled file for easy maintenance.
• Prefer extending $theme-colors with map-merge instead of hardcoding new one-off classes.
• Keep custom CSS layered strictly after Bootstrap's stylesheet in the load order.
• Document why each variable was overridden, especially non-obvious values like border radius or spacing scale changes.
• Test customizations across every component that references the changed variable, not just the one you were focused on.

Common Mistakes

• Placing Sass variable overrides after the @import statement, so they have no effect.
• Overriding compiled CSS classes directly instead of the underlying Sass variables, causing drift after upgrades.
• Forgetting that some component-specific variables exist separately from the global theme variables.
• Mixing too many customization approaches (Sass, CSS variables, and ad-hoc CSS) without a clear system.
• Not testing dark mode (data-bs-theme="dark") after making custom color changes.
• Upgrading Bootstrap versions without checking whether overridden variable names still exist.

Key Takeaways

• Bootstrap can be customized through Sass variables, runtime CSS variables, or layered custom CSS.
• Sass variable overrides must come before the framework's @import statement.
• CSS custom properties allow lightweight, per-component overrides without a rebuild.
• The Utility API lets you add project-specific utility classes matching Bootstrap's conventions.
• data-bs-theme provides a built-in mechanism for light/dark theme switching.