2

I'm just starting with Bootstrap 4 and Sass. I can't for the life of me figure out how to override the default .alert-[whatever] styles.

If I have:

<div class="alert alert-success">Hello!</div>

It creates an alert with the default light shade of green that ships with Bootstrap 4. The only way I can override it is with my own custom CSS style for .alert-success. I'd rather use a built in variable to override it like I'm doing with my other colors, but I have no idea if that's an option?

In my .scss file I have:

$blue: #3498db;
$green: #37bf91;

$theme-colors: (
  "primary": $blue,
  "success": $green,
);

I assumed that .alert-success would just use the $green I've specified in my .scss file, but that doesn't seem to be the case.

I've tried to do $alert-success: $green;which also doesn't change anything.

What's the correct way to go about this?

lexbuckeye
  • 73
  • 2
  • 9

1 Answers1

3

This is similar to: How to change the bootstrap primary color? Make sure you import Bootstrap after the overrides, and I will answer as it related to alerts.

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   
$blue: #3498db;
$green: #37bf91;

$theme-colors: (
  primary: $blue,
  success: $green,
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Demo: https://www.codeply.com/go/NCfqvU3Upe

For the alerts, the bg and text colors are derived using the SASS darken function on the theme color. The defaults are:

$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
$alert-color-level: 6 !default;

The negative numbers lighten the original theme color, the positive numbers darken the color. So, for example if you want to make the success alert bg closer to the actual $green color, you'd adjust the alert variables:

$alert-bg-level:0; // this negates the darken function
$alert-border-level:1;
$alert-color-level:-10;

I updated the demo to show this.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624