Themed Bootstrap5 table colors not working

Question

I themed my bootstrap 5.1.3 using Sass to add new colors to the panel.

I found that Bootstrap 5.1.3 can't be customized as Boostrap4 so I updated my scss file and it now looks like this :

@import "node_modules/bootstrap/scss/_functions";
@import "node_modules/bootstrap/scss/_variables";
@import "node_modules/bootstrap/scss/_mixins";
$custom-theme-colors:map-merge($theme-colors, (
    "lightcornflowerblue": #8ECAE6,
    "bluegreen" : #219EBC,
    "prussianblue": #023047,
    "selectiveyellow": #FFB703,
    "tangerine": #FB8500,
));
$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");
$utilities-table-colors: map-loop($utilities-colors, rgba-css-var, "$key", "table");

@import "node_modules/bootstrap/scss/bootstrap";

I checked and I can see this in the final css file :

.table-danger {
  --bs-table-bg: #f8d7da;
  --bs-table-striped-bg: #eccccf;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfc2c4;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5c7ca;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #dfc2c4; }

But the class "table-danger" doesn't have any effect ! And none of my custom color work for table colors... Do you guys know what I missed in the process ? It was way easier in Bootstrap4 to have custom colors

I uploaded the .map file Modified my scss to merge colors and all as it is now because my old bootstrap 4 scss wasn't working for most of the classes, now some of them work but table colors for example are not working.

It's in the first line of my message 5.1.3 if that's the question — VGO, Feb 28 '23 at 16:00

score 0 · Answer 1 · answered Feb 28 '23 at 13:56

0

I think there are a few problems.

Although the docs aren't very clear, you need to use both the table and table-{variant} class in the table to activate the table colors. So for example for table-danger use:

<table class="table table-danger">..</table>

Bootstrap 5.3 now uses the $table-variants map, not $utilities-table-colors. So to add the new color variants you need to redefine/merge into $table-variants like...

$custom-table-variants: (
  "tangerine": $tangerine,
  "lightcornflowerblue": #8ECAE6
);

$table-variants: map-merge($table-variants, $custom-table-variants);

Demo

answered Feb 28 '23 at 13:56

Carol Skelly

351,302
90
710
624

Hello Zim ! Thank you for your answer. I downloaded Bootstrap 5.3, created the scss you suggested and indeed it works. Th problem I have is the following : On the demo you shared, we can see that the button and the table with class "danger" have different colors. Table colors are lighter and with bootstrap 4, creating a custom color used in a table had the same behavior. With bootstrap 5.3, I now manage to use table-tangerine for example but the color is exactly the same as using bg-tangering, that wasn't the case and I'm expecting a behavior matching the one of danger for example. Any idea? – VGO Mar 01 '23 at 07:32
Another thing : doing what you suggested, I lost some colors for example class "alert-selectiveyellow" that was working before has no effect anymore now. – VGO Mar 01 '23 at 07:43

Themed Bootstrap5 table colors not working

1 Answers1