Question 180220 in CSS Question posted in
Some basic documentation can be found here.

How do I override Bootstrap 5.0 info color & make it like Bootstrap 3’s?

In bootstrap 3, the info color was #d9edf7. When using bg-info or alert-info, the background color was always #d9edf7. I’m trying to override bootstrap 5.0 to have the same effect on the info color.

I have a cutom scss file to override bootstrap:

If I set the info or cyan variable to #d9edf7, then my .bg-info elements look correct but my .alert-info elements are getting lightened by 60%.

$info: #d9edf7;
@import "../scss/bootstrap.scss";

If I set the info or cyan variable to #40a4d7 then my .alert-info elements look correct but my .bg-info elements are 40% darker than #d9edf7.

$info: #40a4d7;
@import "../scss/bootstrap.scss";

How can I override bootstrap to get the desired effect? Basically, anything using the info color should have a background color of #d9edf7.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>

<div class="bg-info" style="width:100%; height:60px;">
This should have the same background color because they're both using the 'info' color
</div>
Tags:

2

Answers


  1. 0

    Bootstrap 5.0.2

    Because of the color "scaling" used in 5.0 you’d need to regenerated the alert-info class by passing the appropriate colors into the alert-variant mixin…

    @import "functions";
@import "mixins";

$info: #d9edf7;

@import "variables";
@import "bootstrap";

.alert-info {
    @include alert-variant($info, $info, shift-color($info, $alert-color-scale));
}

    In this example I still used the scaling for the (foreground) color, but you could just use $body-color instead…

    @include alert-variant($info, $info, $body-color);

    https://codeply.com/p/k0MPD65ezI

    Bootstrap 5.3.0

    As you will read in the docs…

    "Sass mixin is deprecated. Alert variants now have their CSS variables
    overridden in a Sass
    loop    "

    So there are different color vars for the alert text color, bg color, links, etc… In your case, you’d want to override $info-bg-subtle for the background color:

    $info: #d9edf7;
$info-bg-subtle: #d9edf7;

@import "bootstrap";

    SASS demo

    Login or Signup to reply.
  2. 0

    After thorough investigation, it appears the SASS variable causing your issue for Bootstrap 5.0 is $alert-bg-scale. This variable is declared in the _variables.scss file with an initial value of -80%.

    $alert-bg-scale: 0%;
$info: #d9edf7;

@import "bootstrap.scss";

    Unfortunately, it looks like getting the behavior you desire won’t be as simple as you had hoped. If you modify this value, it will make the background color for ALL alerts darker. It appears that they did solve this problem in later versions, per Carol Skelly’s answer.

    A couple of workarounds I can think of off the top of my head:

    Use the .alert-info class wherever you currently are using .bg-info

    This class only applies a border and text color in addition to the background-color.

    Create an override for the .bg-info class

    If you’re absolutely against the idea of having the border and text color set by the previous suggestion, this would work. However, I would recommend against this as it would be modifying the expected behavior of Bootstrap. Alternatively, you could create your own custom class that does this.

    $info: #d9edf7;

@import "bootstrap.scss";

/*
  By calling this after the Bootstrap import, you get access to all the
  SASS functions, namely `shift-color()`
*/
.bg-info {
    background-color: shift-color($info, $alert-bg-scale) !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search