0

I include Bootstrap5 via CDN like this:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

Link where I found this code

My goal: I want to change the colors of my bootstrap colors from the default-blue to some red-tone. Sounds easy, right? Well it´s not: If you first include boostrap CDN and then your own css (as you should) and add the code

--bs-secondary: rgb(243, 113, 33)

the color of .btn-secondary does not change.

In order to change the color from .btn-secondary I would have to manually change the css of this class. This can be quite inefficient if you want to change 5 colors or other variables.

My Question therefore is: Is there an easy way to override custom properties (=css variables) with Bootstrap5 via CDN?

Daniel pühringer
  • 1
  • 1
  • Where are you adding the code? – A Haworth May 08 '21 at 12:11
  • 1
    No, not using CSS variables. Basically, CSS variables are read-only. You can use them to create new classes but not change the existing Bootstrap classes. Customizing Bootstrap colors requires SASS or a lot of custom CSS. – Carol Skelly May 08 '21 at 12:36

0 Answers0