BootstrapHow-ToBeginner · 4 min read

How to Customize Colors in Bootstrap Easily

You can customize colors in Bootstrap by overriding its CSS variables or by modifying Bootstrap's Sass source files before compiling. Using CSS custom properties lets you change colors quickly, while Sass allows deeper customization for your theme.

📐

Syntax

Bootstrap uses CSS variables and Sass variables to define colors. You can override CSS variables in your own stylesheet or change Sass variables before compiling Bootstrap.

Example CSS variable override syntax:

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

Example Sass variable override syntax:

$primary: #ff5733;

css / scss

:root {
  --bs-primary: #ff5733;
  --bs-secondary: #33c3ff;
}

// Or in Sass before importing Bootstrap
$primary: #ff5733;
$secondary: #33c3ff;
@import 'bootstrap';

💻

Example

This example shows how to change Bootstrap's primary and secondary colors by overriding CSS variables in a custom stylesheet.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Color Customization</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    :root {
      --bs-primary: #ff5733; /* bright orange */
      --bs-secondary: #33c3ff; /* bright blue */
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <button class="btn btn-primary me-2">Primary Button</button>
    <button class="btn btn-secondary">Secondary Button</button>
  </div>
</body>
</html>

Output

A webpage with two buttons: the first button is bright orange (custom primary color), the second button is bright blue (custom secondary color).

⚠️

Common Pitfalls

Overriding colors after Bootstrap CSS loads may not work if your CSS is loaded before Bootstrap's CSS.
Changing Sass variables requires recompiling Bootstrap; you cannot do this with just CSS.
Not using :root selector when overriding CSS variables can cause the changes to not apply globally.
For older Bootstrap versions (before v5), CSS variables are not supported, so Sass customization is required.

html

<!-- Wrong: CSS loaded before Bootstrap, so override ignored -->
<style>
  :root {
    --bs-primary: #ff5733;
  }
</style>
<link href="bootstrap.css" rel="stylesheet" />

<!-- Right: Override after Bootstrap CSS -->
<link href="bootstrap.css" rel="stylesheet" />
<style>
  :root {
    --bs-primary: #ff5733;
  }
</style>

📊

Quick Reference

CSS Variables: Override --bs-primary, --bs-secondary, etc. in :root.
Sass Variables: Change $primary, $secondary before importing Bootstrap Sass.
Load Order: Your custom CSS must load after Bootstrap CSS.
Bootstrap Version: CSS variable overrides work in Bootstrap 5 and later.

✅

Key Takeaways

Override Bootstrap CSS variables in your stylesheet to quickly change colors without recompiling.

For deeper customization, modify Sass variables and recompile Bootstrap's source files.

Always load your custom CSS after Bootstrap's CSS to ensure your color changes apply.

Bootstrap 5+ supports CSS variables; older versions require Sass customization.

Use the :root selector to apply CSS variable overrides globally.