Alert
Unstyled
This is an unstyled alert. The alert can be used like this but should be styled (see below).
Text in an alert.
<div class="alert">
Text in an alert.
</div>
Styles
Use the theme colors to style the alert.
Alert primary
Alert secondary
Alert success
Alert warning
Alert danger
Alert info
Alert light
Alert dark
<div class="alert alert-primary">Alert primary</div>
<div class="alert alert-secondary">Alert secondary</div>
<div class="alert alert-success">Alert success</div>
<div class="alert alert-warning">Alert warning</div>
<div class="alert alert-danger">Alert danger</div>
<div class="alert alert-info">Alert info</div>
<div class="alert alert-light">Alert light</div>
<div class="alert alert-dark mb-0">Alert dark</div>
Dismissible
A dismissable alert can be used when the user is allowed to hide it after seeing it. the alert-dismissible class creates an empty area in the top right corner for the button with the close class to go.
At the moment this is non-functional. Use JS for functionality.
Text in an dismissable alert.
<div class="alert alert-primary alert-dismissible">
Text in an dismissable alert.
<button class="close">×</button>>
</div>
HTML content and other styling
You can use regular html inside an alert.
<div class="alert alert-primary">
<h4 class="alert-heading">Congratulations!</h4>
<p>This is an alert content with a <a href="#">link</a>.</p>
<hr>
<p class="mb-0">End of file...</p>
</div>