Bootstrap 5 won't allow me to add additional colors to the map

Question

I'm having trouble adding colors to bootstrap's color map.

This is my current import file:

// Required bootstrap components
@import "../../../node_modules/bootstrap/scss/functions";

$custom-colors: (
    "custom-primary": #003767,
    "custom-secondary": #007f2e,
    "custom-success": #C00000,
    "custom-info": #FF5000,
    "custom-warning": #414A51,
    "custom-danger": #E3E3E3,
    "custom-light": #F0F0F0,
    "custom-dark": #00B2CE,
);

@import "../../../node_modules/bootstrap/scss/variables";
// `$theme-colors` is one of the variable that's declared in variables.scss
// therefore this line of code has to be placed after the variables import
$theme-colors: map-merge($theme-colors, $custom-colors);
// but in order for this to take effect it needs to be before the variables import

// Custom bootstrap
// This file has nothing in it, hence commented
//@import "_custom";

@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";
.
.
.

According to bootstrap's documentation default overrides must be declared before the variables import but in order to use an existing variable it needs to be placed after the variables import.

The code above doesn't add the the custom colors and it doesn't give out an error either.

Zim's answer works but it does not work with bg-[color] classes, like these:

    <!-- Works -->
    <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
    <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
    <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
    <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
    <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
    <div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
    <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
    <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
    <div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
    <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
    <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

    <hr>
    
    <!-- Doesn't work -->
    <div class="p-3 mb-2 bg-custom-primary text-white">.bg-custom-primary</div>
    <div class="p-3 mb-2 bg-custom-secondary text-white">.bg-custom-secondary</div>
    <div class="p-3 mb-2 bg-custom-success text-white">.bg-custom-success</div>
    <div class="p-3 mb-2 bg-custom-danger text-white">.bg-custom-danger</div>
    <div class="p-3 mb-2 bg-custom-warning text-dark">.bg-custom-warning</div>
    <div class="p-3 mb-2 bg-custom-info text-dark">.bg-custom-info</div>
    <div class="p-3 mb-2 bg-custom-light text-dark">.bg-custom-light</div>
    <div class="p-3 mb-2 bg-custom-dark text-white">.bg-custom-dark</div>
    <div class="p-3 mb-2 bg-custom-body text-dark">.bg-custom-body</div>
    <div class="p-3 mb-2 bg-custom-white text-dark">.bg-custom-white</div>
    <div class="p-3 mb-2 bg-custom-transparent text-dark">.bg-custom-transparent</div>

I am using Bootstrap 5.1.3

How do you add custom colors to bootstrap 5?

Carol Skelly · Accepted Answer · 2022-01-05T16:11:40.347

4

I'm not sure what you have in _custom, but the $custom-colors map you've created should work fine to generate the additional colors.

First import functions and variables, merge the $custom-colors map with $theme-colors, finally @import bootstrap (you can import the entire thing, or separate modules as you have done):

@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";

$custom-colors: (
    "custom-primary": #003767,
    "custom-secondary": #007f2e,
    "custom-success": #C00000,
    "custom-info": #FF5000,
    "custom-warning": #414A51,
    "custom-danger": #E3E3E3,
    "custom-light": #F0F0F0,
    "custom-dark": #00B2CE,
);

$theme-colors: map-merge($theme-colors, $custom-colors);
      
@import "../../../node_modules/bootstrap";

SASS demo

Another important thing to note is that in 5.1.x, you need to do more as explained here in order to generate custom text- and bg- classes. Also see issue: https://github.com/twbs/bootstrap/issues/35297

edited Jan 05 '22 at 16:11

answered Jan 05 '22 at 15:03

Carol Skelly

351,302
90
710
624

Hi Zim, I tried your code and it worked and I found out that mine wasn't working not because of the order of the import but for some reason bootstrap doesn't want to change the color to custom on `bg-custom` classes. Also _custom has nothing in it, I will update my question with additional information. – Timber Jan 05 '22 at 15:50
I did not read your last sentence, oops. Yes that would help with the bg problem I just mentioned. – Timber Jan 05 '22 at 16:04
Then you will need to do what's explained here: https://github.com/twbs/bootstrap/issues/35297 – Carol Skelly Jan 05 '22 at 16:12

Bootstrap 5 won't allow me to add additional colors to the map

1 Answers1