How to add a custom color to the Bootstrap palette?

Add a custom color by extending Bootstrap’s $theme-colors Sass map before importing the framework. 2. Define the color variable and update the map with your custom color, such as "purple": #8a2be2. 3. Import Bootstrap in your SCSS file after the customization to ensure the new color is compiled into utility classes like text-purple, bg-purple, and btn-purple. 4. Use the generated classes directly in HTML for text, backgrounds, and buttons. 5. Optionally, add more variants like "purple-light" to create additional utility classes automatically. This method integrates seamlessly without extra CSS.

To add a custom color to the Bootstrap palette, you need to extend Bootstrap’s Sass variables before importing the framework. This allows your custom color to be integrated into Bootstrap's utility classes, components, and functions like text-color, bg-color, and border-color.

1. Customize Bootstrap’s $theme-colors Map

Bootstrap uses a Sass map called $theme-colors to define its color palette (e.g., primary, secondary, success). You can add your own color by extending this map.

Example: Adding a custom color called "purple":

$theme-colors: (
  "purple": #8a2be2
);

This will generate utility classes like text-purple, bg-purple, and allow usage in components like buttons (btn-purple).

2. Import Bootstrap After Defining Variables

Make sure to define your custom colors before importing Bootstrap. Otherwise, your changes won’t be picked up.

Your main SCSS file (e.g., styles.scss) should look like:

// Define custom colors
$purple: #8a2be2;
$theme-colors: (
  "purple": $purple
);

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

This ensures that Bootstrap compiles with your extended color set.

3. Use Your Custom Color in HTML

Once compiled, you can use the new color just like any built-in Bootstrap class:

• <div class="text-purple">Colored text</div>
• <button class="btn btn-purple">Purple Button</button>
• <div class="bg-purple p-3">Purple background</div>

4. Optional – Add More Variants

You can also define additional shades or states. For example, to control hover effects or add a soft variant:

$theme-colors: (
  "purple":      #8a2be2,
  "purple-light": #d0bfff
);

This creates bg-purple-light and other utility classes automatically.

Basically, it's all about overriding the $theme-colors map the right way. As long as you define it before importing Bootstrap, everything works seamlessly. No extra CSS needed.

The above is the detailed content of How to add a custom color to the Bootstrap palette?. For more information, please follow other related articles on the PHP Chinese website!