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.

score 2 · Accepted Answer · answered Sep 19 '18 at 10:38

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
);

score 0 · Answer 2 · answered Sep 19 '18 at 10:16

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;
}

score 0 · Answer 3 · answered Sep 19 '18 at 10:33

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);
  }
}

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

3 Answers3