0

I am using bootstrap4 and trying to change some button colors using SASS. In my custom SCSS file I have the following...

@import "node_modules/bootstrap/scss/bootstrap";

$theme-colors: (
    "primary": red
);

When compiled, this is working correctly. Now I want to modify the disabled state of primary buttons in the same way.

I am struggling to find any examples. Can anyone point me to one?

fightstarr20
  • 11,682
  • 40
  • 154
  • 278

2 Answers2

1

The button-variant @mixin is used to build the buttons, and by default .disabled is a variation of the background color. The mixin doesn't have a parameter for the disabled color.

Therefore, you'd have to explicitly set the state using a selector like .btn-primary.disabled and recompile using the button-variant @mixin. For example, here is changing disabled state to grey background with black border...

$theme-colors: (
    "primary": red
);

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

.btn-primary.disabled {
    @include button-variant(grey, black);
}

@import "bootstrap";

Demo: https://codeply.com/p/pi3OthqQos

Related question: how to change bootstrap version 4 button color

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

Available varibles for disabled buttons :

This for changing the background opacity of a disabled button

`$btn-disabled-opacity` *Default value:* 0.65

This for changing disabled link button text color (<a class="btn btn-primary disabled"> Disabled link </a>)

`$btn-link-disabled-color` *Default value* $gray-600

If you want to create your own Bootstrap theme you can take a look at this online builder he will help you with variables names and values

Ali BEN AMOR
  • 126
  • 1
  • 6
  • I wanted to change the background color rather than just the opacity – fightstarr20 Nov 01 '20 at 13:50
  • 1
    by default the disabled button will inherit the background color of the button (primary, danger, info, ..) if you want custom color you can add a color to the `$theme-colors` map and use it for disabled button – Ali BEN AMOR Nov 01 '20 at 23:19