Overwrite primary Bootstrap 4 color with internal CSS

Question

I need to change the default primary Bootstrap 4 color (after the Bootstrap stylesheet has been loaded) to a custom color (choosed by user) for a dynamic Bootstrap component with an internal CSS stylesheet. I could do, for example, .btn-primary { background-color: red; } but this works just for buttons and, however, it doesn't change the other btn-primary states like ":hover", ":active" and "disabled". It also doesn't change the "primary" color throughout the entire CSS for .alert-primary, .text-primary, .bg-primary, .btn-outline-primary, .badge-primary, etc...

What's the possible solution?

score 1 · Answer 1 · 2019-12-09T12:50:46.477

1

You need to download the Bootstrap Sass files. You can do so from this link.

Once you have them you can open the main bootstrap .scss file and search for:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Change "primary" to what you need and then recompile to CSS. If you don't have Sass installed on your machine you can use various online tools to accomplish this. Example.

Source: https://getbootstrap.com/docs/4.3/getting-started/theming/

edited Dec 09 '19 at 12:50

answered Dec 09 '19 at 11:53

I can't edit the .scss file because I need to change the primary color after when the user change desidered color. There is a color picker, the user chooses the color, save the settings and the Bootstrap component need to have the standard behavior but with customized primary color instead of standard color. Is it possible? – icolumbro Dec 09 '19 at 12:02
My bad, forgot about that last bit on your post. I'm not too familiar with that particular use-case, but you could try doing this: https://stackoverflow.com/a/30724171/7974621. – Dec 09 '19 at 12:33

score 0 · Answer 2 · answered Dec 09 '19 at 12:43

You can do so by using the variables concept(https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) Bootstrap 4 also works on the variables

You can try changing the variable values at run time as mentioned below:

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}

// get variable from inline style
element.style.getPropertyValue("--main-bg-color");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--main-bg-color");

// set variable on inline style
element.style.setProperty("--main-bg-color", "red");

score 0 · Answer 3 · answered Dec 10 '19 at 14:37

There are different ways do it. I am describing one of them. Import below lines to your scss file. @import '~bootstrap/scss/bootstrap.scss';

After that write below code to override it.

$primary = 'red';
$gray = 'gray';
.btn {&.btn-primary {
 @include button-variant($primary, $primary, $primary, $primary);
  &.disabled,
  &:disabled {
   border: $gray;
   background-color: $gray;
 }
 &:hover {
  opacity: 0.85;
}
 } 
 }

Check the link to use sass mixins to override bootsrap classes.

Overwrite primary Bootstrap 4 color with internal CSS

3 Answers3