<div class="alert alert-primary" role="alert">
    a simple primary alert
</div>
<div class="alert alert-success" role="alert">
    a simple success alert
</div>
<div class="alert alert-info" role="alert">
    a simple info alert
</div>
<div class="alert alert-warning" role="alert">
    a simple warning alert
</div>
<div class="alert alert-danger mb-0" role="alert">
    a simple danger alert
</div>
        
    

        
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger alert-dismissible fade show mb-0" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
        
    

Sass variables

        
// Sass Variables
$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side
        
    

Variant mixins

        
// Variant mixin
@mixin alert-variant($background, $border, $color) {
    color: $color;
    @include gradient-bg($background);
    border-color: $border;
  
    .alert-link {
      color: shade-color($color, 20%);
    }
}