2

I have been playing around with Bootstrap's brand new 5.0.1.

In the official docs they are saying that they are using CSS variables in the compiled CSS.

Sounds to me like I can overwrite certain colors during run-time. For example, I would like to have e. g. RED instead of default BLUE for the whole "primary" theme.

See this very simple sample. Nothing happens. The badge and the button are still BLUE.

<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <style>
          :root{--bs-primary: red;}
         </style>
     </head>
     <body>        
        <div class="badge bg-primary">100</div>
        <button class="btn btn-primary">Just a button</div>
    </body>
</html>

What do you guys think? Am I doing anything wrong? Or is the Bootstrap team just not ready to have CSS variables for every component?

Important: I know that I could use SASS to switch from BLUE to RED at compile time. But I need a solution that let's me change colors during run-time, because I simply don't know the required colors at compile time.

Update 05/16/2021: All I would like to know at this time is if the Bootstrap team is still working on adding CSS variables to the compiled css (maybe in v5.x.x) - or if I misunderstand the whole thing? Thank you guys.

Update 05/17/2021: Modifying badges is pretty easy as @Sameer showed us below. However, modifying buttons is not that simple. So I added a button to my sample.

Update 05/18/2021: For anybody interested, I opened a thread on the Bootstrap community forums.

Ingmar
  • 1,525
  • 6
  • 34
  • 51
  • Does this answer your question? [Overriding :root CSS variables from inner scopes](https://stackoverflow.com/questions/58206867/overriding-root-css-variables-from-inner-scopes) – Mike Doe May 09 '21 at 04:55
  • @emix: Thank you.This is a very interesting post. But I do not think think this is what I am looking for. https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.css is the compiled Bootstrap CSS. You will find a few "var()" statements. But not as many as I expected after reading the mentioned documentation. I was thinking that by modifying "--bs-primary" this modification would be applied to all controls that are based on this primary color/theme, e. g. ".btn-primary". Instead, .btn-primary is set to "background-color: #0d6efd;" as a constant. No variable. – Ingmar May 09 '21 at 05:07
  • I have a similar problem right now: I have a static page which loads the Bootstrap 5 CSS from a CDN. I just want to change a few colors but it seems like I would need to generate the whole CSS to reflect those changes and include that, too. What did you end up doing to solve your issue? – finefoot Sep 17 '21 at 01:44
  • Hi @rattlesnake, I ended up returning customized Bootstrap css files directly from my server. But it'a terrible solution: If the request is coming from user X, the responsible MVC controller is loading the original Bootstrap classes into memory and then replaces all default color codes with the color codes relevant for user X. The result is what is going back to user X. Surprisingly this is pretty perfomant. At least it is fast enough in our context (not very many users). But it's definitely not a nice solution. – Ingmar Sep 17 '21 at 07:23

3 Answers3

4

After inspecting the badge it looks like bootstrap doesn't apply background color using a variable.

So you can't override CSS by changing bootstrap CSS variables, I think they added CSS variables to allow us to style our own elements.

One way would be to override manually like

.bg-primary {
    background-color: var(--bs-primary) !important;
}

But if you would use SASS, then it's easy to change the theme and colors.

  1. How to change bootstrap default theme using SASS
  2. Official Documentation

Update:
Someone already requested this (See here), but the bootstrap team doesn't want to implement this for various reasons like support for old browsers, No plans to rearchitect all of the codebase to do this, etc.

So there will be no official support for this, But on the same page I found this useful.

Hermanya user changed the output of Bootstrap CSS to use CSS variables instead, So at runtime we can change the colors.

Here is the codepen demo
Here is an article about how he did that.
He also published it cdn link

Although it may work, But you have do it again and again whenever bootstrap gets an update.

Sameer
  • 4,758
  • 3
  • 20
  • 41
  • Sameer, thank you for your help! However, I am aware of all the things you wrote. I just don't know if the Bootstrap team forgot to add CSS variables all over the place, or if they are still working on it or if I missed the whole point. I do have to apologize though, because I picked a bad example. Modifying badges is very simple indeed (as you showed us). But what about buttons and all other components that rely e.g. on the "primary" or "secondary" theme? So I added a simple button to my sample to make it "complete". Thank you again! – Ingmar May 17 '21 at 06:09
  • @Ingmar Answer updated. BTW Currently bootstrap variables are [read-only](https://github.com/twbs/bootstrap/issues/23349#issuecomment-346909917) – Sameer May 17 '21 at 09:12
  • Yes, I have seen that article a couple of weeks ago. This is would be a pretty wild solution just to change a couple colors on the fly. I will take it into account though if I don't find anything better. – Ingmar May 18 '21 at 06:38
  • Are you sure the Bootstrap variables are supposed to be read-only? The post you are referring to is over 3 year old. Reading the current documentation at https://getbootstrap.com/docs/5.0/customize/css-variables/#component-variables I am not so sure if they really want to keep it read-only. In fact this is still my main interest: is the Bootstrap team still working on adding more CSS variables so I can change the "primary" colors during run-time. I better go ask them directly on their community forums. Thank you, Sameer. – Ingmar May 18 '21 at 06:43
1

You need to use important with style in css and that should be after bootstrap loaded.

.bg-primary {
    background-color: var(--bs-primary) !important;
}
Sandeep K Goyal
  • 280
  • 2
  • 9
0

Looks like the've introduced runtime CSS variables in Bootstrap 5.1 and have been adding variables in 5.2!

https://blog.getbootstrap.com/2022/05/16/using-bootstrap-css-vars/

Martijn
  • 36
  • 3