# Bootstrap 5 Alerts

Provide feedback messages for typical user actions with the handful of available and flexible alert messages.

## Example

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](#dismissing).

```html
<div class="alert alert-primary" role="alert">
  <div class="alert-message">
    A simple primary alert—check it out!
  </div>
</div>
<div class="alert alert-secondary" role="alert">
  <div class="alert-message">
    A simple secondary alert—check it out!
  </div>
</div>
<div class="alert alert-success" role="alert">
  <div class="alert-message">
    A simple success alert—check it out!
  </div>
</div>
<div class="alert alert-danger" role="alert">
  <div class="alert-message">
    A simple danger alert—check it out!
  </div>
</div>
<div class="alert alert-warning" role="alert">
  <div class="alert-message">
    A simple warning alert—check it out!
  </div>
</div>
<div class="alert alert-info" role="alert">
  <div class="alert-message">
    A simple info alert—check it out!
  </div>
</div>
<div class="alert alert-light" role="alert">
  <div class="alert-message">
    A simple light alert—check it out!
  </div>
</div>
<div class="alert alert-dark" role="alert">
  <div class="alert-message">
    A simple dark alert—check it out!
  </div>
</div>
```

## Link color

Use the `.alert-link` utility class to give links inside an alert a matching color.

```html
<div class="alert alert-primary" role="alert">
  <div class="alert-message">
    A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-secondary" role="alert">
  <div class="alert-message">
    A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-success" role="alert">
  <div class="alert-message">
    A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-danger" role="alert">
  <div class="alert-message">
    A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-warning" role="alert">
  <div class="alert-message">
    A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-info" role="alert">
  <div class="alert-message">
    A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-light" role="alert">
  <div class="alert-message">
    A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-dark" role="alert">
  <div class="alert-message">
    A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
```

## Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

```html
<div class="alert alert-success" role="alert">
  <div class="alert-message">
    <h4 class="alert-heading">Well done!</h4>
    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
    <hr>
    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
  </div>
</div>
```

## Icons

Use [flexbox utilities](/bootstrap/docs/utilities/flex/) and SVG icons to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.

```html
<div class="alert alert-primary" role="alert">
  <div class="alert-message d-flex align-items-center">
    <svg width="16" height="16" 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>
</div>
```

## Dismissing

To dismiss an alert inline with the alert JavaScript plugin:

- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
- Add a [close button](/bootstrap/docs/components/close-button/) and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the close button.
- On the close button, add the `data-bs-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
- To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.

You can see this in action with a live demo:

```html
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <div class="alert-message">
    <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>
</div>
```

---

Canonical HTML page: https://adminkit.io/bootstrap/docs/components/alerts/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io
