How to change background color of dropdown button (Vue Bootstrap)

Question

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/

You should make use of variant as described in the official documentation — Chin. Udara
– Chin. Udara, Commented Jun 8, 2021 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
– Chin. Udara, Commented Jun 8, 2021 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
– kissu, Commented Jun 8, 2021 at 14:36

kissu · Accepted Answer · 2021-06-08 14:25:42Z

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

answered Jun 8, 2021 at 14:25

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Chin. Udara Over a year ago

Make sure to add the scoped attribute to the css section otherwise this will affect the original btn-secondary theme set by bootstrap itself.

kissu Over a year ago

@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?

Chin. Udara Over a year ago

You probably cant make the fiddle style scoped. I was just pointing it out.

Zaeem Khaliq Over a year ago

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' ??

kissu Over a year ago

@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: stackoverflow.com/a/55368933/8816585

Collectives™ on Stack Overflow

How to change background color of dropdown button (Vue Bootstrap)

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related