How to change css color to match bootstrap theme

Question

I'm trying to create a new css class with the same background color as bootstrap uses for "bg-primary". I've read the documentation and under SASS it says that I should be able to use the color as a variable in other CSS files, but I'm not sure how.

I want to do something like this:

.my_css_class{
    background-color: bg-primary;
}

I've seen some questions in stack that suggest importing a lot of files, but I have the feeling there should be an easier way.

Answer 1

Assuming I am interpreting your question correctly and you are using CSS (as opposed to Sass/SCSS), the easiest thing you could do would be to use CSS custom properties (basically native CSS variables). It turns out Bootstrap provides CSS custom properties for the theme colors, so you should be able to write this as:

.my_css_class{
    background-color: var(--bs-primary);
}