Alerts
Light Alerts
Display default alerts in Bootstrap using the .alert class. Add contextual classes like .alert-primary, .alert-success, or .alert-danger for different alert styles.
Outline Alerts
Create outline alerts with Bootstrap using the .alert-outline-* classes. Replace * with a color variant like primary, success, or danger for different outline styles.
Link Alerts
Create outline alerts with Bootstrap using the .alert-outline-* classes. Replace * with a color variant like primary, success, or danger for different outline styles.
Dismissing Alerts
Theme color Archive just adding class .alert-outline-*
Icon Alerts
Create outline alerts with Bootstrap using the .alert-light-* classes. Replace * with a color variant like primary, success, or danger for different outline styles.
Left Border Alerts
Add a left border to alerts in Bootstrap using the .alert-border-* class. This class applies a primary color border to the left side of the alert box.
Additional content
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.