Components menu
Alerts
Alert messages can be used to notify the user about something, such as a danger, success, information or warning.
A primary alert
A success alert
A danger alert
A warning alert
An information light background alert
An information dark background alert
HTML
<div class="alert alert-primary" role="alert"> A primary alert </div>
<div class="alert alert-success" role="alert"> A success alert </div>
<div class="alert alert-danger" role="alert"> A danger alert </div>
<div class="alert alert-warning" role="alert"> A warning alert </div>
<div class="alert alert-light" role="alert"> An information light background alert </div>
<div class="alert alert-dark" role="alert"> An information dark background alert </div>
CSS
/* Alert box
------------------------------------ */
.alert, .alert p {
font-size: 1rem;
}
.alert p {
margin-bottom: 0;
}
.alert-primary {
--bs-alert-color: #ffffff;
--bs-alert-bg: var(--scottish-teal);
--bs-alert-border-color: var(--scottish-dark-teal);
}
.alert-success {
--bs-alert-color: #000000;
--bs-alert-bg: var(--verdant-green);
--bs-alert-border-color: #39b06e;
}
.alert-danger {
--bs-alert-color: #000000;
--bs-alert-bg: #f8d7da;
--bs-alert-border-color: #f5c2c7;
}
.alert-warning {
--bs-alert-color: #000000;
--bs-alert-bg: #fff3cd;
--bs-alert-border-color: #ffecb5;
}
.alert-light {
--bs-alert-color: #000000;
--bs-alert-bg: var(--grey-four);
--bs-alert-border-color: var(--grey-three);
}
.alert-dark {
--bs-alert-color: #ffffff;
--bs-alert-bg: var(--grey-one);
--bs-alert-border-color: var(--grey-two);
}