Alerts are available for any length of
text, as well as an optional dismiss button. For proper styling, use one
of the four required contextual classes (e.g., .alert-success
).
For inline
dismissal, use the alerts jQuery plugin.
<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>
You can see this in action with a live demo:
<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%); } }