How can I change or customize the alert colors bootstrap 4 and Ruby on Rails 5

Question

I'm using bootstrap gem 4.0.0.beta2.1, Rails 5.1.4 and standard bootstrap alerts (class: "alert alert-info"). They are nice, but don't fit to my styling. I would like to have the white background for example. How can I customize it? Is there any way I can change Bootstrap4 variables?

Answer 1

You can add custom classes to your alert div. In my case i have added "alert-custom" class instead of alert-* and applied css to it as follows

html:

<div class="alert alert-custom  fade in alert-dismissable show" style="margin-top:18px;">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true" style="font-size:20px">×</span>
  </button>    <strong>Success!</strong> This alert box indicates a successful or positive action.
</div>

CSS:

.alert-custom{
  background-color:#6089D5;
  color:#fff;
}

For Your Reference: JSFiddle

Answer 2

In Bootstrap's _variables.scss, there are variables related to alert colors:

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

I can't find any mention of these in the documentation, but the values appear to adjust the lightness or darkness of the color passed in by whichever class is applied to the alert (e.g. alert-primary).

So for example, if you override $alert-bg-level with 0, the background color of .alert-primary will be identical to whatever color you've defined as $primary, whereas a value of 10 will make it darker or a value of -10 will make it lighter.

The background and border colors use a scale of -10 to 10, while the text color seems to use a scale of 0 to 10.