Alert - Bootstrap 5

Provide feedback messages for user actions with any required contextual classes(.alert-success). Alerts are available for any length of text, as well as an optional close button.

Example 1: Bootstrap 5 Alert boxes with contextual classes.

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

Example 2: 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>
<script>
    const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
    const alert = (message, type) => {
        const wrapper = document.createElement('div')
        wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible">`,
    `   <div>${message}</div>`,
    `   <button type="button" class="btn-close" data-bs-dismiss="alert"></button>`,
    `</div>`
  ].join('')

  alertPlaceholder.append(wrapper)
}

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

Use the .alert-link class to quickly provide matching colored links within any alert.

Example 3: Bootstrap Alert with links.

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

Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Use following steps:

• Be sure you've loaded the alert plugin (Bootstrap JavaScript).
• Add a close button and the .alert-dismissible class.
• On the close button, add the data-bs-dismiss="alert" attribute
• To animate alerts when dismissing them, be sure to add the .fade and .show classes.

Example 4: Bootstrap Alert with a close button

<div class="alert alert-warning alert-dismissible fade show">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>