Bootstrap 4 provides an easy way to create predefined alert messages
.alert-link utility class to quickly provide matching colored links within any alert.
.alert-dismissible utility class to dismiss an alert when corresponding button is clicked.
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
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.
The following table provides a list of all classes to create alert.
|.alert||Creates an alert message box.|
|.alert-primary||Blue alert. Indicates an important action.|
|.alert-secondary||Grey alert. Indicates a "less" important action.|
|.alert-success||Green alert. Indicates a successful or positive action.|
|.alert-danger||Red alert. Indicates a dangerous or potentially negative action.|
|.alert-warning||Yellow alert. Indicates caution should be taken with this action.|
|.alert-info||Teal alert. Indicates a neutral informative change or action.|
|.alert-light||Light alert. Light grey alert box.|
|.alert-dark||Dark alert. Dark grey alert box.|
|.alert-link||Used on links inside alerts to provide matching colored links.|
|.alert-heading||Adds css color: inherit property to the specified element|
|.close||Styles a close icon. This is often used for alerts and modals. Often used together with the × symbol to create the actual icon (a better looking "x"). It floats right by default.|