Alerts

Examples

Use the theme colors to style the alert.

<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.

<div class="alert alert-primary alert-dismissible fade show">
    Text in an dismissable alert.
    <button class="close" data-bs-dismiss="alert">&times;</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="#" class="alert-link">link</a>.</p>
    <hr>
    <p class="mb-0">End of file...</p>
</div>