How to use CSS variables with Bootstrap 5?

user_987800 0
Viewed 3203

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.

twitter-bootstrap
3 Answers

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.

user_117197870

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

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