Basic Alert
To indicate additional information add the .alert class.
Status Alerts
To emphasize important information add the .alert .info
classes.
To indicate success or a positive message add the
.alert .success classes.
To highlight a message containing a warning add the
.alert .warning classes.
To highlight a message containing an error add the
.alert .error classes.
Status Alerts Without Icons
Alerts With Headers
Header
Multiple lines of text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Basic Alert as a Callout Box
Header
Multiple lines of text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Usage
<p class="alert">…</p>
<p class="alert info">…</p>
<p class="alert success">…</p>
<p class="alert warning">…</p>
<p class="alert error">…</p>
<p class="alert info no-icon">…</p>
<div class="alert info">
<h3>…</h3>
<p>…</p>
</div>