BootstrapHow-ToBeginner · 3 min read

How to Change Primary Color in Bootstrap Easily

To change the primary color in Bootstrap, override the CSS variable --bs-primary in your stylesheet or customize the $primary Sass variable before compiling Bootstrap. This lets you set your own color that Bootstrap components will use as the primary color.

📐

Syntax

You can change Bootstrap's primary color by overriding the CSS variable --bs-primary in your CSS or by setting the Sass variable $primary before compiling Bootstrap's Sass files.

CSS variable override: Use :root { --bs-primary: your-color; } to set the color globally.
Sass variable: Set $primary: your-color; before importing Bootstrap Sass files.

css

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

// OR in Sass
$primary: #ff5733;
@import "bootstrap";

💻

Example

This example shows how to change the primary color to a bright orange by overriding the CSS variable --bs-primary. The button uses the new primary color.

html

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

Output

A webpage with a bright orange button labeled 'Primary Button' styled using Bootstrap's btn-primary class but with the new orange color.

⚠️

Common Pitfalls

Common mistakes when changing Bootstrap's primary color include:

Overriding the wrong CSS variable or not using :root, which causes the color not to apply globally.
Changing the Sass variable $primary after importing Bootstrap, which has no effect.
Not recompiling Bootstrap Sass files after changing $primary.
Using inline styles or overriding classes instead of variables, which leads to inconsistent colors.

scss

// Wrong: overriding after import (Sass)
@import "bootstrap";
$primary: #ff5733; // This does nothing

// Right: override before import
$primary: #ff5733;
@import "bootstrap";

📊

Quick Reference

Summary tips for changing Bootstrap primary color:

Use :root { --bs-primary: your-color; } for quick CSS overrides.
Use Sass variable $primary before importing Bootstrap for full customization.
Recompile Sass files after changing variables.
Test changes on components like buttons to confirm the new color applies.

✅

Key Takeaways

Override the CSS variable --bs-primary in :root to change Bootstrap's primary color quickly.

Set the Sass variable $primary before importing Bootstrap Sass for full control and customization.

Always recompile Bootstrap Sass files after changing variables to see the effect.

Avoid overriding styles after importing Bootstrap Sass as it won't change the primary color.

Test your changes on Bootstrap components like buttons to ensure the new primary color is applied.