1

I'm using a CDN to import Bootstrap 5 CSS. Bootstrap contains a bunch of different root CSS variables that are used by the components.

Here is my code:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" />

    <style>
        :root {
            --bs-primary: red;
        }
    </style>

    <button class="btn btn-primary">
        i should be red but im not
    </button>

I was assuming that this would apply the --bs-primary color to all of the bootstrap components, but it doesn't. I've tried placing the custom var declaration above the CDN link, and even adding !important. Nothing seems to work.

According to the docs I should be able to do this. Why doesn't it work?

Improve this question
2
  • Also try clearing browser cache and reload, or use incognito/private mode to ensure cache is not interfering. Commented Jan 30, 2024 at 13:16
  • your variable name is overriding the color to red. you can check in browsers inspect and check in :root, [data-bs-theme=light] . if you hover on the --bs-primary it will show you red. The issue here is the btn styles(--bs-btn-bg:#0d6efd) are already set using default color system and after that you are trying to change it. Hope this explanation helps. to solve this, you have to download it and customize. customization : getbootstrap.com/docs/5.3/customize/color Commented Jan 30, 2024 at 13:26
Related questions
3007
How can I transition height: 0; to height: auto; using CSS?
2551
How do I reduce the opacity of an element's background using CSS?
1236
Center a column using Twitter Bootstrap
Load 5 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.