Alerts
Provide contextual feedback messages for typical user actions.
Basic Alerts
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>Link Color
A simple primary alert with an example link.
A simple success alert with an example link.
A simple danger alert with an example link.
<div class="alert alert-primary" role="alert">
Alert with <a href="#" class="alert-link">a link</a>.
</div>With Icons
An example success alert with an icon
An example warning alert with an icon
An example danger alert with an icon
<div class="alert alert-success d-flex align-items-center" role="alert">
<i class="bi bi-check-circle-fill me-2"></i>
<div>An example success alert with an icon</div>
</div>Dismissible Alerts
Holy guacamole! You should check in on some of those fields below.
Well done! You successfully read this important alert message.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> Message here.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>