CSS - Copy Bootstrap .btn To New CSS File Is Failing

normally when I copy bootstrap css to a new file it copies over with all the same property settings.
I’m using the new “Startup Modern” template & trying to copy .btn class.

When I do copy it over most of the original properties aren’t set, background colors, font etc have changed.

Is this supposed to be like this & it’s the first time I’ve come across it or is it a bug?

When you copy the .btn block, is the copied block the same as the originial (i.e. does it have the same rules and values)? This is what I get when I copy it:

If it’s the same for you, then copying isn’t the issue. What is happening though, is that all the CSS variables in the new .btn block (--bs-btn-* rules) are overriding the ones set by other blocks in Bootstrap. If you remove them, the button will look the same as it did before.

Before removing --bs-btn-* rules:

After removing --bs-btn-* rules:

Bootstrap has started adding CSS variables to their components, which makes it easier to modify them. You just need to change the variable’s value:


Hope this helps!

Hi gabby,
Thanks for replying, yes you’re probably correct, I was a bit tired when doing this so will go through what you’ve pointed out more thoroughly & try & get my head into the game a bit better, thanks for the explanation.