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

**URL:** <https://forum.bootstrapstudio.io/t/css-copy-bootstrap-btn-to-new-css-file-is-failing/9606>\
**Category:** Bug Reports\
**Created:** [November 11, 2022, 5:28am UTC](https://forum.bootstrapstudio.io/t/css-copy-bootstrap-btn-to-new-css-file-is-failing/9606 "2022-11-11T05:28:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![timespider](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/timespider/32/1998_2.png) [@timespider](https://forum.bootstrapstudio.io/u/timespider)\
**Post date:** [November 11, 2022, 5:28am UTC](https://forum.bootstrapstudio.io/t/css-copy-bootstrap-btn-to-new-css-file-is-failing/9606/1 "2022-11-11T05:28:27Z")

</div>

Hi,  
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?

---

<div class="post-metadata">

**Author:** ![gabby](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/gabby/32/341_2.png) [@gabby](https://forum.bootstrapstudio.io/u/gabby)\
**Post date:** [November 11, 2022, 10:33am UTC](https://forum.bootstrapstudio.io/t/css-copy-bootstrap-btn-to-new-css-file-is-failing/9606/2 "2022-11-11T10:33:07Z")

</div>

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:

 ![image](https://forum.bootstrapstudio.io/uploads/default/original/2X/1/16e11759bde79aaf2ca183f5deb8bc4f2ad95cec.png)

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:**

 ![image](https://forum.bootstrapstudio.io/uploads/default/original/2X/7/763fe52aa3449febbcf2c6322356fa8c3eb1167d.png)

**After removing `--bs-btn-*` rules:**

 ![image](https://forum.bootstrapstudio.io/uploads/default/original/2X/8/89273161fcfe98d68721edac4f7b91e44d70d21f.png)

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:

![image](https://forum.bootstrapstudio.io/uploads/default/original/2X/b/bf1780d7f38fbdb1372632d7b57901cb3a8afbfe.png)

Hope this helps!

---

<div class="post-metadata">

**Author:** ![timespider](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/timespider/32/1998_2.png) [@timespider](https://forum.bootstrapstudio.io/u/timespider)\
**Post date:** [November 11, 2022, 8:48pm UTC](https://forum.bootstrapstudio.io/t/css-copy-bootstrap-btn-to-new-css-file-is-failing/9606/3 "2022-11-11T20:48:30Z")

</div>

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.

Cheers