Bootstrap 5 – Custom theme-colors not updating classes

by

Bootstrap 5.1.0

A recent change to the way the text- and bg- classes are created requires additional SASS map merges in 5.1.0

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$custom-theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));

$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";

Bootstrap 5.0.2

You need to add a “tertiary” var to the theme-colors map using map-merge if you want it to generate classes like bg-tertiary, btn-tertiary, etc…

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));
      
@import "bootstrap";

Demo

More Related Contents:

  1. Unable to override $theme-color in bootstrap
  2. How to extend/modify (customize) Bootstrap with SASS
  3. Center the content inside a column in Bootstrap
  4. Left align and right align within div in Bootstrap
  5. Bootstrap 5 navbar align items right
  6. Disable responsive (mobile) navbar in Bootstrap
  7. How to create new breakpoints in bootstrap 4 using CDN?
  8. Why is the Bootstrap Navbar always collapsed? [duplicate]
  9. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  10. Using media breakpoints in Bootstrap 4-alpha
  11. Bootstrap – I don’t want columns to have the same height
  12. How to use bootstrap 4 in angular 2?
  13. My Bootstrap Window Became to large?
  14. What is the difference between Bootstrap .container and .container-fluid classes?
  15. Bootstrap: Collapse other sections when one is expanded
  16. Limit the scope of bootstrap styles
  17. How do I set the offset for ScrollSpy in Bootstrap?
  18. Bootstrap 3 breakpoints and media queries
  19. Customize Bootstrap 4’s grid-system Breakpoints
  20. bootstrap 4 responsive utilities visible / hidden xs sm lg not working
  21. How to create a sticky left sidebar menu using bootstrap 3?
  22. Bootstrap 4 Multiple fixed-top navbars
  23. Can I use twitter bootstrap without jquery?
  24. How to left column fixed and right scrollable in Bootstrap 4, responsive?
  25. Leaflet map not showing properly in bootstrap 3.0 modal
  26. Vertical alignment of text and icon in button
  27. Decreasing height of bootstrap 3.0 navbar
  28. Disable dropup feature using Bootstrap Select
  29. Bootstrap 4 responsive navbar vertical
  30. How to justify navbar-nav in Bootstrap 3

Leave a Comment