Search code examples
csssasscss-variablesbootstrap-5

is there a way to use bootstrap 5 custom color directly in the class attribute?

like we do:

<span class="text-primary">some text</span>

I want to know if there is a way to do:

<span class="text-red-300">some text</span>

red-300 is a bootstrap 5 custom color and there are others in the following link. https://getbootstrap.com/docs/5.0/customize/color/

Solution

  • There is no way to use $red-300 directly in CSS. It's only possible using SASS because $red-300 is a SASS variable.

    However, the base colors are also available as CSS variables. For example, --bs-red is the same as $red and $red-500. So, it could be used as a CSS variable like this...

    .text-red-500 {
   color: var(--bs-red);
}

    CSS Demo

    If you wanted to use SASS for $red-300, it would be done like this:

    @import "functions";
@import "variables";

.text-red-300 {
    color: $red-300;
}

    SASS demo