Alerts
Alerts are used to communicate a state that affects a system, feature or page. They are used to provide feedback about an action that has taken place.
Primary Alert
1<div class="alert alert-primary w-100 mb-0" role="alert">
2 Notification text
3</div>
Secondary Alert
1<div class="alert alert-secondary w-100 mb-0" role="alert">
2 Notification text
3</div>Horizontal Alert
1<div class="alert alert-horizontal alert-dismissible w-100" role="alert">
2 <h4 class="alert-heading">Lorem Ipsum Dolor</h4>
3 <p>Notification text</p>
4 <p>
5 <a href="#">Learn more</a>
6 </p>
7 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
8</div>Vertical Alert
1<div class="alert alert-vertical alert-dismissible" role="alert">
2 <h4 class="alert-heading">Lorem Ipsum Dolor</h4>
3 <p>Notification text</p>
4 <p>
5 <a href="#">Learn more</a>
6 </p>
7 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
8</div>Yellow Alert
1<div class="alert alert-yellow w-100 mb-0" role="alert">
2 Notification text
3</div>Accessibility
Make it clear what this alert does for the user.
-
What to do with alerts
-
What not to do with alerts
Classes
Complete list of all CSS classes for the component.
| Name | Class |
|---|---|
| Primary Alert | alert alert-primary |
| Secondary Alert | alert alert-secondary |
| Horizontal Alert | alert alert-horizontal |
| Vertical Alert | alert alert-vertical |
| Yellow Alert | alert alert-yellow |