Unable to override $theme-color in bootstrap

by

Update 2021 for Bootstrap 5

Per the guidance in the docs…

“Variable overrides must come after our functions are imported, but
before the rest of the imports.”

Therefore, overriding the theme-colors in Bootstrap 5 works the same way as 4.x. In order to override the theme-colors, simply change appropriate theme color variable before importing bootstrap.scss

/* custom.scss */
/* change theme colors */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
/* end custom.scss */

@import '~bootstrap/scss/bootstrap.scss';

Update 2018 for Bootstrap 4.1

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the default value, and will then be set in all the theme-colors loops (btn-primary, bg-primary, text-primary, etc..)…

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: #333333;
);

/* finally, import Bootstrap */
@import '~bootstrap/scss/bootstrap.scss';

Demo: https://www.codeply.com/go/lobGxGgfZE

Also see this answer

More Related Contents:

  1. How to extend/modify (customize) Bootstrap with SASS
  2. Center the content inside a column in Bootstrap
  3. Left align and right align within div in Bootstrap
  4. Disable responsive (mobile) navbar in Bootstrap
  5. How to create new breakpoints in bootstrap 4 using CDN?
  6. Why is the Bootstrap Navbar always collapsed? [duplicate]
  7. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  8. Using media breakpoints in Bootstrap 4-alpha
  9. Bootstrap 5 – Custom theme-colors not updating classes
  10. Bootstrap – I don’t want columns to have the same height
  11. Bootstrap align navbar items to the right
  12. Change navbar color in Twitter Bootstrap
  13. Five equal columns in twitter bootstrap
  14. How to make the row stretch remaining height
  15. Bootstrap Rows and Columns – Do I need to use row?
  16. Bootstrap Center Vertical and Horizontal Alignment
  17. Missing visible-** and hidden-** in Bootstrap v4
  18. Responsive website zoomed out to full width on mobile
  19. Bootstrap 5 navbar align items right
  20. Bootstrap – row can I have columns add up to more then 12?
  21. Wrapping bootstrap columns in extra div
  22. Bootstrap 4 Navbar align logo center and toggle icon on the left
  23. Bootstrap 4 Multiple fixed-top navbars
  24. Missing visible-** and hidden-** in Bootstrap
  25. bootstrap 4 nav doesn’t display hamburger on resize
  26. How can I center an image in Bootstrap?
  27. how to change bootstrap version 4 button color
  28. How can I get my Twitter Bootstrap buttons to right align?
  29. Bootstrap 4 responsive navbar vertical
  30. How to use bootstrap 4 in angular 2?

Leave a Comment