Documentation
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Examples
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts JavaScript plugin.
A simple primary alert
A simple secondary alert
A simple success alert
A simple danger alert
A simple warning alert
A simple info alert
A simple light alert
A simple dark alert
<div class="alert alert-primary" role="alert">
<p>A simple primary alert</p>
</div>
<div class="alert alert-secondary" role="alert">
<p>A simple secondary alert </p>
</div>
<div class="alert alert-success"" role="alert">
<p>A simple success alert</p>
</div>
<div class="alert alert-danger" role="alert">
<p>A simple danger alert</p>
</div>
<div class="alert alert-warning" role="alert">
<p> A simple warning alert </p>
</div>
<div class="alert alert-info" role="alert">
<p>A simple info alert</p>
</div>
<div class="alert alert-light" role="alert">
<p>A simple light alert</p>
</div>
<div class="alert alert-dark" role="alert">
<p>A simple dark alert</p>
</div>Link color
Use the required alert-link utility class to quickly provide matching colored links within any alert.
A simple primary alert with an example link. Give it a click if you like.
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>Icons
Use the required Bootstrap icon (e.g SVG icon) to create alerts with icons.
An example alert with an icon
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<div>
An example alert with an icon
</div>
</div>Dismissing
Use the Button and .alert-dismissible class for dismissing and also add data-bs-dismiss="alert" attribute on the button which triggers the JavaScript functionality. also use .fade and .show classes for animate the alert.
Holy guacamole! You should check in on some of those fields below.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>