[Vuejs]-How to customize the backgorund-color of cancel-button in b-modal?

by

3👍

✅

If you’re using SASS you can easily add new variants to your project by adding them to the $theme-colors map.
These will automatically become available to use with bootstrap-vue everywhere you can use a variant.

custom.scss

$theme-colors: (
  "cancel": rgb(139, 80, 80)
);

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

Then import custom.scss in your apps entry point.

If you want a simple CSS solution, the cancel-variant property just adds the class btn-* where * is the string you provide.

Which means you can add the css below to your global stylesheet, to add a new variant (however, doing it this way you’ll have to write all the :hover, :active stuff yourself)

.btn-cancel {
  color: #fff;
  background-color: rgb(213, 213, 213);
  border-color: rgb(213, 213, 213);
}

After adding one of the options above you will now have the option to do <b-modal cancel-variant="cancel"></b-modal> to utilize your new variant.

👤Hiws

Leave a comment