1

I am unable to change background color of dropdown button by any means. I've tried with ID, with removing its class and writing my own class and overriding by using !important but the background color is not changing. The button is not actually there in the code. But it is appearing in the DOM with class '.btn-secondary'.

Please suggest ways to change it. I want this color:-

.btn-secondary {
    background-color: #ff3838;
}

Here is the link:-

https://jsfiddle.net/94quwf6r/2/

kissu
  • 40,416
  • 14
  • 65
  • 133
Zaeem Khaliq
  • 296
  • 5
  • 14
  • You should make use of `variant` as described in the [official documentation](https://bootstrap-vue.org/docs/components/dropdown#dropdown-color-variants) – Chin. Udara Jun 08 '21 at 14:29
  • Also, you can add a custom class to the toggle button itself by passing the class name to the `toggle-class` property. Then you can add the style you require to that class, which is a better solution than editing the original theme values. – Chin. Udara Jun 08 '21 at 14:34
  • @Chin.Udara it can be useful if he wants to update the original BS theme but there are indeed better ways to achieve this. – kissu Jun 08 '21 at 14:36

1 Answers1

1

Working great so far. Don't forget to press Run on the top left of the page for it to take your changes into account (it is not auto-refreshing).

enter image description here

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Make sure to add the `scoped` attribute to the css section otherwise this will affect the original `btn-secondary` theme set by bootstrap itself. – Chin. Udara Jun 08 '21 at 14:31
  • @Chin.Udara at this point, if he is doing a quick VueJS wiring, I'm not sure he is too much concerned about CSS scoping. Can you actually make it here? – kissu Jun 08 '21 at 14:33
  • You probably cant make the fiddle style `scoped`. I was just pointing it out. – Chin. Udara Jun 08 '21 at 14:35
  • Still not working on my actual project. In my actual project there is a Header component, in that there is this dropdown button. I've made the Header styles scoped. Now even if I override with '.btn-secondary', it's not happening. But when I remove the 'scoped', then it's overriding (but that is the main .btn-secondary class and probably don't want that). How to make it possible with 'scoped' ?? – Zaeem Khaliq Jun 08 '21 at 14:54
  • 1
    @ZaeemKhaliq Do you use CSS or SASS? If you do use regular CSS, `>>> .btn-secondary` should be enough. If using SASS, use `::v-deep .btn-secondary`. Keep the `scoped` in both cases. More details here: https://stackoverflow.com/a/55368933/8816585 – kissu Jun 08 '21 at 14:58