#### Alerts

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

Table of Content

- Examples
  1. Basic Example
- Live Example
- Dismissing

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

##### Basic Example

This is a primary alert—check it out!
This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a info alert—check it out!

                        <div class="alert alert-black" role="alert">
                        This is a primary alert—check it out!
                        </div>
                        <div class="alert alert-primary" role="alert">
                        This is a primary alert—check it out!
                        </div>
                        <div class="alert alert-secondary" role="alert">
                        This is a secondary alert—check it out!
                        </div>
                        <div class="alert alert-success" role="alert">
                        This is a success alert—check it out!
                        </div>
                        <div class="alert alert-danger" role="alert">
                        This is a danger alert—check it out!
                        </div>
                        <div class="alert alert-warning" role="alert">
                        This is a warning alert—check it out!
                        </div>
                        <div class="alert alert-info" role="alert">
                        This is a info alert—check it out!
                        </div>

#### Live example

Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.

                        <div id="liveAlertPlaceholder"></div>
                        <button type="button" class="btn btn-primary" id="liveAlertBtn">
                          Show live alert
                        </button>

We use the following JavaScript to trigger our live alert demo:

                        const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
                        const appendAlert = (message, type) => {
                          const wrapper = document.createElement('div')
                          wrapper.innerHTML = [
                            `<div class="alert alert-${type} alert-dismissible" role="alert">`,
                            `   <div>${message}</div>`,
                            '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
                            '</div>'
                          ].join('')

                          alertPlaceholder.append(wrapper)
                        }

                        const alertTrigger = document.getElementById('liveAlertBtn')
                        if (alertTrigger) {
                          alertTrigger.addEventListener('click', () => {
                            appendAlert('Nice, you triggered this alert message!', 'success')
                          })
                        }

#### Dismissing

Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:

- Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
- Add a 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:

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>