How to override Bootstraps “btn-primary” active background-color using SASS?

Question

I am using bootstrap 4 with SCSS and have troubles to find the variable which is responsible for the background of an "btn-primary" element which is active.

Of course I could just override the css file like that after the compiling process.

.btn-primary:not(:disabled):not(.disabled):active{
  background-color:red;
}

But this is a bit hacky. I would like to undestand how bootstrap is generating this particular color? I am pretty sure I am missing something.

Please see this jsfiddle and click on the test button to see what I mean.

Solved: The color is stored within $primary (Thank you ReSedano)

Just do a

$primary: #ff00ff;

before you load bootstrap.

Answer 1

this is a simple error . bootstrasp.css after style.css if yes can you move bootstrap.css before style.css

like

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css">
<!-- custom CSS -->
<link rel="stylesheet" href="css/style.css">

use css in style.css

.btn-primary:not(:disabled):not(.disabled) {
background: red;
}

Answer 2

Here you can understand How to override boostrap4 using scss : How to extend/modify (customize) Bootstrap 4 with SASS .

In your case you have to override the map $theme-colors :

$theme-colors: (
  "primary": #ff0000 // <= put here your color
);

To understand "how bootstrap is generating this particular color?" in _buttons.scss file you can find the function:

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

So to change colors, Bootstrap loop the map call $theme-colors that you find in _variable.scss file.

$theme-colors: () !default;

$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

Answer 3

If you go to https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css which is a cdn for bootstrap, you will see minified version of bootstrap library. Everytime you use it as a cdn or as downloaded file, you are using css rules for declared classes from this source. Fill free to control + f and search for .btn-primary:not(:disabled):not(.disabled):active to see the rules for this class.

Also, you are right. The way you did it is a bit hacky. What you should do is put new class on an element on which you want to overrirde bootstrap rules and then in css or scss use it like this

.btn-primary.mycustombuttonclass {
    background: white; //for example
}

Answer 4

Theme colors is defined in _variables.scss

Buttons is generated in _buttons.scss and uses button-variant() mixin

// _variables.scss
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

// _buttons.scss
@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}