Globally changes for button component

I would like to make a customization to the “Buttons” component, generally across all classes. Where do I need to do this?

I would like to do the following:

  • Background color of buttons all (primary, success etc.) to 100%.
  • Text color of all buttons (primary, success etc.) to white
  • Background color of all buttons (primary, success etc.) to 50%.
  • Deactivate border of all buttons (primary, success etc.)

Only with adjusting the variables I fail. Is there another way to do this, e.g. via mixins or maps?

I’m not that experienced yet.

Thx for your Support.
Reto

.btn-bg-opacity-50 {
  opacity: 0.50;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}


I just created a new class for the opacity. Then just copy the var to a new stylesheet and change as needed. Background color is already at 100% and the text is white already.

I could have adjusted var

 --bs-btn-disabled-opacity: 0.65;

to

 --bs-btn-disabled-opacity: 0.50;

which would give you some more control in the settings but was unsure if you were using it for a disabled state button.

Perhaps you can help me to understand what the advantage is to these --bs- variables. I’m still scratching my head.

How is

.btn-primary {
--bs-btn-color: #fff;
}

more useful compared to…

.btn-primary {
color: #fff;
}

To me, it just seems like they added Bootstrap specific rules with the --bs-btn- , but how do they help us as developers over the ordinary CSS rules?

@printninja
CSS variables helps you to write less classes and reduce the size of your css file.
CSS variables is easy to change with javascript.
Here is a simple example to change background color and opacity of a button

1 Like

Okay, I can see how this might be useful in the event you wanted to incorporate features on a site (or even build an entire website) that offered user-selectable customization (ex. a light and dark theme.)

I edited answer to show mixin 5.2.3 code

Bootstrap v5.2.3 btn-mixin-sass-compiled-theme

$theme-btn-bg-primary: $blue-800;
$theme-btn-bg-secondary: $indigo-400;
$theme-btn-bg-success: $purple-700;
$theme-btn-bg-info: $pink-500;
$theme-btn-bg-warning: $red-300;
$theme-btn-bg-danger: $orange-500;
$theme-btn-bg-light: $gray-400;
$theme-btn-bg-dark: $gray-700;
$theme-btn-bg-link: $green-500;
$theme-btn-text: $black;
$theme-btn-disabled-text: $white;



.btn-primary {
  @include button-variant($theme-btn-bg-primary, $theme-btn-bg-primary, color-contrast($theme-btn-bg-primary), shade-color($theme-btn-bg-primary, 0%));
}
.btn-secondary {
  @include button-variant($theme-btn-bg-secondary, $theme-btn-bg-secondary, color-contrast($theme-btn-bg-secondary), shade-color($theme-btn-bg-secondary, 0%));
}
.btn-success {
  @include button-variant($theme-btn-bg-success, $theme-btn-bg-success, color-contrast($theme-btn-bg-success), shade-color($theme-btn-bg-success, 0%));
}
.btn-info {
  @include button-variant($theme-btn-bg-info, $theme-btn-bg-info, color-contrast($theme-btn-bg-info), shade-color($theme-btn-bg-info, 0%));
}
//

.btn-warning {
  @include button-variant( $theme-btn-bg-warning, $theme-btn-bg-warning, color-contrast($theme-btn-text), shade-color($theme-btn-bg-warning, 0%), shade-color($theme-btn-bg-warning, 0%), color-contrast($theme-btn-text), shade-color($theme-btn-bg-warning, 10%), shade-color($theme-btn-bg-warning, 10%), color-contrast($theme-btn-bg-warning), $theme-btn-bg-warning, $theme-btn-bg-warning);--bs-btn-active-color:#fff;--bs-btn-disabled-color:#fff;
}
//

.btn-danger {
  @include button-variant($theme-btn-bg-danger, $theme-btn-bg-danger, color-contrast($theme-btn-text), shade-color($theme-btn-bg-danger, 0%), shade-color($theme-btn-bg-danger, 0%), color-contrast($theme-btn-text), shade-color($theme-btn-bg-danger, 10%), shade-color($theme-btn-bg-danger, 10%), color-contrast($theme-btn-bg-danger), $theme-btn-bg-danger, $theme-btn-bg-danger);--bs-btn-active-color:#fff;--bs-btn-disabled-color:#fff;
}
.btn-light {
  @include button-variant($theme-btn-bg-light, $theme-btn-bg-light, color-contrast($theme-btn-text), shade-color($theme-btn-bg-light, 0%), shade-color($theme-btn-bg-light, 0%), color-contrast($theme-btn-text), shade-color($theme-btn-bg-light, 10%), shade-color($theme-btn-bg-light, 10%), color-contrast($theme-btn-bg-light), $theme-btn-bg-light, $theme-btn-bg-light);--bs-btn-active-color:#fff;--bs-btn-disabled-color:#fff;
}
.btn-dark {
  @include button-variant($theme-btn-bg-dark, $theme-btn-bg-dark, color-contrast($theme-btn-bg-dark), shade-color($theme-btn-bg-dark, 0%));
}
.btn-link {
  @include button-variant($theme-btn-bg-link, $theme-btn-bg-link, color-contrast($theme-btn-bg-link), shade-color($theme-btn-bg-link, 0%));
}

@printninja

Light and dark theme is easy to make
here is an example

2 Likes

Thank you for this. It’s a strong kick in my butt to make me commit to learning JS in 2023.

I think it would a good solution if I change the colors in the Bootstrap Theme (HTML panel) section that everything gets adjusted to it.
I changed the secondary color, but the buttons stay gray.

Bootstrap uses different variables for the button colors vs the theme colors. I kind of agree that it would be nice if changing the theme colors affected the colors globally, but Bootstrap apparently feels otherwise. You can always write your own color classes and add them to the buttons. Then save the CSS file and load it into new sites as needed.

1 Like

I wrote a theme generator that allows you to change all the default colours, it was written for bootstrap 5.1 but should still work. I will get round to updating/rewriting it soon.

2 Likes

That’s my current solution. I was hoping that I was missing something since some classes responded to the global Color change :slight_smile:

Does this also take buttons into account?

Nice tool. I see now in the sass build 5.2.3 they have added _variables-dark.scss. I just figured this out today as I was wondering why my custom build was using two root(s) for different themes…

:root,
[data-bs-theme=light] {

:root,
[data-bs-theme=dark] {

I suppose we will see the final product in 5.3 but I have been experimenting with a theme-toggle button that toggle the data-bs-theme attribute light/dark and things look really interesting…

Will be interesting to see how the devs of Bootstrap Studio add this in…unless they are just waiting for the official release.

Yes it should work fine for everything including buttons