Remove "!important" coming from bootstrap

Question

I want to override .text-primary with a color of my choice.

So in my override file, I defined it like:

@include text-emphasis-variant(".text-primary",$brand-primary, true);

The text-emphasis-variant is a mixin from Bootstrap 4 that is defined in such a way that the color property is marked as !important. So the generated css file is as follows:

.text-primary {
  color: #007bff !important; }

a.text-primary:hover, a.text-primary:focus {
  color: #0056b3 !important; }

.text-primary {
  color: #0078D2 !important; }

a.text-primary:hover, a.text-primary:focus {
  color: #004c86 !important; }

Now, I want to use the text-primary class inside another class:

<div class="customRow">
    <span class="text-primary"> Testing </span>
</div>

And I have another override like:

.customRow>span {
    color: #555
}

The problem here is that it is not taking the color #555 since the color in text-primary is marked as !important.

Answer 1

i'm currently working on a project that i overrided the bootstrap 5 by following this tutorial hope it can help you too . if you are using Bootstrap 5 The right way to override $theme-colors is to by doing this

// First override some or all individual color variables
$primary: #25408f;
$secondary: #8f5325;
$success: #3e8d63;
$info: #13101c;
$warning: #945707;
$danger: #d62518;
$light: #f8f9fa;
$dark: #343a40;

// Then add them to your custom theme-colors map, together with any additional colors you might need
$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  success: $success,
  info: $info,
  warning: $warning,
  danger: $danger,
  light: $light,
  dark: $dark,
  // add any additional color below
);

for more information see this link