Bootstrap 5.2.3 adding custom color to map

Question

I am trying to add an extra color to my Bootstrap 5.2.3 project, but it's not generating the bg-* or text-* classes.

I tried using the Bootstrap 5.1 solutions found on GitHub, like these:

$starorange: #df711b;

$custom-theme-colors: (
  "starorange": $starorange
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";

But using < div class = "bg-starorange" > text < / div > does absolutely nothing. The bg-starorange class is not being generated.

So I went to the Bootstrap 5.2.3 docs and read that for this version, it should just be:

@import "variables.scss";
$custom-colors: (
   "purple": $purple
 );
    
 // Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
   
@import "~bootstrap/scss/bootstrap";

The purple var is coming from the variables.scss file which is imported earlier and just includes some colors, but no maps etc.

When I use bg-purple on a div, I dont see anything in the dev tools inspector, when I do a global search in the whole project for "bg-purple" nothing is found. What am I doing wrong?

Answer 1

If it doesn't work, I just manually add the custom parameters on the bootstrap.css file like this:

:root{
 --bs-starorange: #000000;
 --bs-starorange-rgb: 0, 0, 0;
}

.border-starorange{
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-starorange-rgb), var(--bs-border-opacity)) !important;
}

.text-starorange{
  --bs-text-opacity: 1;
  color: rgba(var(--bs-starorange-rgb), var(--bs-text-opacity)) !important;
}

.bg-starorange{
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-starorange-rgb), var(--bs-bg-opacity)) !important;
}

Now just edit the HEX and RGB numbers to match the color you're looking for.

Answer 2

I've been struggling with this for a while.

To accomplish this (at least in v5.3.x) I had to use it as described in the "Include parts of Bootstrap" option. Then, I imported like this:

1. Bootstrap's functions
2. Your custom variables
3. Bootstrap's variables
4. Make your maps merges
5. Anything else (including Bootstrap's maps)

It would look something like this:

@import "~bootstrap/scss/functions";

// Custom variables
@import "variables";
$custom-colors: (
   "purple": $purple
);

@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/variables-dark";

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

...

Kind regards!