3

Is there a way to disable and rewrite, or override Bootstrap 4's color themes when loaded from cdn?

Essentially, I was to see elements in my html, like <span class="btn btn-primary">My RED Button</span>

map-remove will not work since $theme-colors is not accessible to me. It's in the CDN source:

$theme-colors: map-remove($theme-colors, "success", "info", "danger", "primary");

I can do $primary: red !default; but that's only going to effect classes I create on my own.

Adding $theme-colors (primary: red) !default with !default has no effect either.

There's a discussion about this, but it does not apply to bootstrap that is loaded from CDN, as far as I understood.

I really prefer not overriding every single bootstrap class just to get the colors right, and I really prefer not loading bootstrap locally.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Ben
  • 2,957
  • 2
  • 27
  • 55
  • You cannot use SCSS, but you can override some colours with custom CSS. – Klooven May 31 '18 at 20:06
  • Are you using a SASS compiler.. or are you saying you want to use CSS only? – Carol Skelly May 31 '18 at 20:34
  • This [answer](https://stackoverflow.com/questions/38792005/how-to-change-the-bootstrap-primary-color) explains how to override the primary theme color with SASS. So you could reference bootstrap.min.css on CDN and follow it with a custom theme.css compiled using the SASS as explained in the other [answer](https://stackoverflow.com/questions/38792005/how-to-change-the-bootstrap-primary-color). – Carol Skelly May 31 '18 at 20:42
  • @ZimSystem, what do you mean by "reference bootstrap.min.css on CDN"? Can you give a detailed answer explaining your solution? – Ben May 31 '18 at 20:54

1 Answers1

7

Unless someone believes there is a way, the answer to my question after looking at it for a while is this: Loading bootstrap from CDN loads compiled CSS and there is no way to override values that should otherwise be compiled by sass and by that override the Bootstrap colors. The only solution is to load it locally with sass or create overriding classes for every element you wish to override.

Just one note for those thinking of overriding - you may want to download the original bootstrap Source files and copy the mixins and mapping of elements instead of overriding with compiled code, if you are using sass.

Ben
  • 2,957
  • 2
  • 27
  • 55