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.

<div class="d-flex align-items-center p-3 text-white bg-primary rounded" role="alert">
  <span class="d-inline-flex flex-shrink-0 align-items-center justify-content-center me-3 rounded" style="width: 2.5rem; height: 2.5rem; background-color: rgba(0, 0, 0, 25%);">
    <svg class="gi gi-flash-outline fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.193 2.415c.614-.843 1.946-.302 1.798.73h0l-.838 5.847 5.848.001a1 1 0 0 1 .868 1.496h0l-.06.092-8 11c-.613.843-1.946.303-1.8-.73h0l.837-5.86-5.847.001a1 1 0 0 1-.868-1.497h0l.06-.092zm-.752 4.43l-4.475 6.148 5.035.001a1 1 0 0 1 1 1.029h0l-.01.112-.432 3.015 4.478-6.157-5.036.001a1 1 0 0 1-1-1.03h0l.01-.112.43-3.007z"/>
    </svg>
  </span>
  <p class="text-truncate"><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
</div>
<div class="d-flex align-items-center p-3 text-white bg-secondary rounded" role="alert">
  <span class="d-inline-flex flex-shrink-0 align-items-center justify-content-center me-3 rounded" style="width: 2.5rem; height: 2.5rem; background-color: rgba(0, 0, 0, 25%);">
    <svg class="gi gi-flash-outline fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.193 2.415c.614-.843 1.946-.302 1.798.73h0l-.838 5.847 5.848.001a1 1 0 0 1 .868 1.496h0l-.06.092-8 11c-.613.843-1.946.303-1.8-.73h0l.837-5.86-5.847.001a1 1 0 0 1-.868-1.497h0l.06-.092zm-.752 4.43l-4.475 6.148 5.035.001a1 1 0 0 1 1 1.029h0l-.01.112-.432 3.015 4.478-6.157-5.036.001a1 1 0 0 1-1-1.03h0l.01-.112.43-3.007z"/>
    </svg>
  </span>
  <p class="text-truncate"><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
</div>
<div class="d-flex align-items-center p-3 text-white bg-success rounded" role="alert">
  <span class="d-inline-flex flex-shrink-0 align-items-center justify-content-center me-3 rounded" style="width: 2.5rem; height: 2.5rem; background-color: rgba(0, 0, 0, 25%);">
    <svg class="gi gi-flash-outline fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.193 2.415c.614-.843 1.946-.302 1.798.73h0l-.838 5.847 5.848.001a1 1 0 0 1 .868 1.496h0l-.06.092-8 11c-.613.843-1.946.303-1.8-.73h0l.837-5.86-5.847.001a1 1 0 0 1-.868-1.497h0l.06-.092zm-.752 4.43l-4.475 6.148 5.035.001a1 1 0 0 1 1 1.029h0l-.01.112-.432 3.015 4.478-6.157-5.036.001a1 1 0 0 1-1-1.03h0l.01-.112.43-3.007z"/>
    </svg>
  </span>
  <p class="text-truncate"><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
</div>
<div class="d-flex align-items-center p-3 text-white bg-danger rounded" role="alert">
  <span class="d-inline-flex flex-shrink-0 align-items-center justify-content-center me-3 rounded" style="width: 2.5rem; height: 2.5rem; background-color: rgba(0, 0, 0, 25%);">
    <svg class="gi gi-flash-outline fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.193 2.415c.614-.843 1.946-.302 1.798.73h0l-.838 5.847 5.848.001a1 1 0 0 1 .868 1.496h0l-.06.092-8 11c-.613.843-1.946.303-1.8-.73h0l.837-5.86-5.847.001a1 1 0 0 1-.868-1.497h0l.06-.092zm-.752 4.43l-4.475 6.148 5.035.001a1 1 0 0 1 1 1.029h0l-.01.112-.432 3.015 4.478-6.157-5.036.001a1 1 0 0 1-1-1.03h0l.01-.112.43-3.007z"/>
    </svg>
  </span>
  <p class="text-truncate"><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
</div>
<div class="d-flex align-items-center p-3 text-white bg-dark rounded" role="alert">
  <span class="d-inline-flex flex-shrink-0 align-items-center justify-content-center me-3 rounded" style="width: 2.5rem; height: 2.5rem; background-color: rgba(0, 0, 0, 25%);">
    <svg class="gi gi-flash-outline fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.193 2.415c.614-.843 1.946-.302 1.798.73h0l-.838 5.847 5.848.001a1 1 0 0 1 .868 1.496h0l-.06.092-8 11c-.613.843-1.946.303-1.8-.73h0l.837-5.86-5.847.001a1 1 0 0 1-.868-1.497h0l.06-.092zm-.752 4.43l-4.475 6.148 5.035.001a1 1 0 0 1 1 1.029h0l-.01.112-.432 3.015 4.478-6.157-5.036.001a1 1 0 0 1-1-1.03h0l.01-.112.43-3.007z"/>
    </svg>
  </span>
  <p class="text-truncate"><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
</div>

Dismissing

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

  • Add a 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:

<div class="alert fade show d-flex align-items-center p-3 text-white bg-primary rounded" role="alert">
  <span class="d-inline-flex flex-shrink-0 align-items-center justify-content-center me-3 rounded" style="width: 2.5rem; height: 2.5rem; background-color: rgba(0, 0, 0, 25%);">
    <svg class="gi gi-flash-outline fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.193 2.415c.614-.843 1.946-.302 1.798.73h0l-.838 5.847 5.848.001a1 1 0 0 1 .868 1.496h0l-.06.092-8 11c-.613.843-1.946.303-1.8-.73h0l.837-5.86-5.847.001a1 1 0 0 1-.868-1.497h0l.06-.092zm-.752 4.43l-4.475 6.148 5.035.001a1 1 0 0 1 1 1.029h0l-.01.112-.432 3.015 4.478-6.157-5.036.001a1 1 0 0 1-1-1.03h0l.01-.112.43-3.007z"/>
    </svg>
  </span>
  <p class="text-truncate me-auto"><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
  <button class="btn d-inline-flex flex-shrink-0 align-items-center justify-content-center p-0 ms-5" data-gs-dismiss="alert" style="width: 2.5rem; height: 2.5rem; background-color: rgba(255, 255, 255, 15%);" type="button" aria-label="Close">
    <svg class="gi gi-x fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M7.613 6.2l.094.083L12 10.585l4.293-4.292.094-.083a1 1 0 0 1 1.403 1.403l-.083.094L13.415 12l4.292 4.293a1 1 0 0 1-1.32 1.497l-.094-.083L12 13.415l-4.293 4.292-.094.083a1 1 0 0 1-1.403-1.403l.083-.094L10.585 12 6.293 7.707a1 1 0 0 1 1.32-1.497z"/>
    </svg>
  </button>
</div>
<div class="alert fade show d-flex align-items-center p-3 text-white bg-secondary rounded" role="alert">
  <span class="d-inline-flex flex-shrink-0 align-items-center justify-content-center me-3 rounded" style="width: 2.5rem; height: 2.5rem; background-color: rgba(0, 0, 0, 25%);">
    <svg class="gi gi-flash-outline fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.193 2.415c.614-.843 1.946-.302 1.798.73h0l-.838 5.847 5.848.001a1 1 0 0 1 .868 1.496h0l-.06.092-8 11c-.613.843-1.946.303-1.8-.73h0l.837-5.86-5.847.001a1 1 0 0 1-.868-1.497h0l.06-.092zm-.752 4.43l-4.475 6.148 5.035.001a1 1 0 0 1 1 1.029h0l-.01.112-.432 3.015 4.478-6.157-5.036.001a1 1 0 0 1-1-1.03h0l.01-.112.43-3.007z"/>
    </svg>
  </span>
  <p class="text-truncate me-auto"><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
  <button class="btn d-inline-flex flex-shrink-0 align-items-center justify-content-center p-0 ms-5" data-gs-dismiss="alert" style="width: 2.5rem; height: 2.5rem; background-color: rgba(255, 255, 255, 15%);" type="button" aria-label="Close">
    <svg class="gi gi-x fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M7.613 6.2l.094.083L12 10.585l4.293-4.292.094-.083a1 1 0 0 1 1.403 1.403l-.083.094L13.415 12l4.292 4.293a1 1 0 0 1-1.32 1.497l-.094-.083L12 13.415l-4.293 4.292-.094.083a1 1 0 0 1-1.403-1.403l.083-.094L10.585 12 6.293 7.707a1 1 0 0 1 1.32-1.497z"/>
    </svg>
  </button>
</div>
<div class="alert fade show d-flex align-items-center p-3 text-white bg-success rounded" role="alert">
  <span class="d-inline-flex flex-shrink-0 align-items-center justify-content-center me-3 rounded" style="width: 2.5rem; height: 2.5rem; background-color: rgba(0, 0, 0, 25%);">
    <svg class="gi gi-flash-outline fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.193 2.415c.614-.843 1.946-.302 1.798.73h0l-.838 5.847 5.848.001a1 1 0 0 1 .868 1.496h0l-.06.092-8 11c-.613.843-1.946.303-1.8-.73h0l.837-5.86-5.847.001a1 1 0 0 1-.868-1.497h0l.06-.092zm-.752 4.43l-4.475 6.148 5.035.001a1 1 0 0 1 1 1.029h0l-.01.112-.432 3.015 4.478-6.157-5.036.001a1 1 0 0 1-1-1.03h0l.01-.112.43-3.007z"/>
    </svg>
  </span>
  <p class="text-truncate me-auto"><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
  <button class="btn d-inline-flex flex-shrink-0 align-items-center justify-content-center p-0 ms-5" data-gs-dismiss="alert" style="width: 2.5rem; height: 2.5rem; background-color: rgba(255, 255, 255, 15%);" type="button" aria-label="Close">
    <svg class="gi gi-x fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M7.613 6.2l.094.083L12 10.585l4.293-4.292.094-.083a1 1 0 0 1 1.403 1.403l-.083.094L13.415 12l4.292 4.293a1 1 0 0 1-1.32 1.497l-.094-.083L12 13.415l-4.293 4.292-.094.083a1 1 0 0 1-1.403-1.403l.083-.094L10.585 12 6.293 7.707a1 1 0 0 1 1.32-1.497z"/>
    </svg>
  </button>
</div>
<div class="alert fade show d-flex align-items-center p-3 text-white bg-danger rounded" role="alert">
  <span class="d-inline-flex flex-shrink-0 align-items-center justify-content-center me-3 rounded" style="width: 2.5rem; height: 2.5rem; background-color: rgba(0, 0, 0, 25%);">
    <svg class="gi gi-flash-outline fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.193 2.415c.614-.843 1.946-.302 1.798.73h0l-.838 5.847 5.848.001a1 1 0 0 1 .868 1.496h0l-.06.092-8 11c-.613.843-1.946.303-1.8-.73h0l.837-5.86-5.847.001a1 1 0 0 1-.868-1.497h0l.06-.092zm-.752 4.43l-4.475 6.148 5.035.001a1 1 0 0 1 1 1.029h0l-.01.112-.432 3.015 4.478-6.157-5.036.001a1 1 0 0 1-1-1.03h0l.01-.112.43-3.007z"/>
    </svg>
  </span>
  <p class="text-truncate me-auto"><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
  <button class="btn d-inline-flex flex-shrink-0 align-items-center justify-content-center p-0 ms-5" data-gs-dismiss="alert" style="width: 2.5rem; height: 2.5rem; background-color: rgba(255, 255, 255, 15%);" type="button" aria-label="Close">
    <svg class="gi gi-x fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M7.613 6.2l.094.083L12 10.585l4.293-4.292.094-.083a1 1 0 0 1 1.403 1.403l-.083.094L13.415 12l4.292 4.293a1 1 0 0 1-1.32 1.497l-.094-.083L12 13.415l-4.293 4.292-.094.083a1 1 0 0 1-1.403-1.403l.083-.094L10.585 12 6.293 7.707a1 1 0 0 1 1.32-1.497z"/>
    </svg>
  </button>
</div>
<div class="alert fade show d-flex align-items-center p-3 text-white bg-dark rounded" role="alert">
  <span class="d-inline-flex flex-shrink-0 align-items-center justify-content-center me-3 rounded" style="width: 2.5rem; height: 2.5rem; background-color: rgba(0, 0, 0, 25%);">
    <svg class="gi gi-flash-outline fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.193 2.415c.614-.843 1.946-.302 1.798.73h0l-.838 5.847 5.848.001a1 1 0 0 1 .868 1.496h0l-.06.092-8 11c-.613.843-1.946.303-1.8-.73h0l.837-5.86-5.847.001a1 1 0 0 1-.868-1.497h0l.06-.092zm-.752 4.43l-4.475 6.148 5.035.001a1 1 0 0 1 1 1.029h0l-.01.112-.432 3.015 4.478-6.157-5.036.001a1 1 0 0 1-1-1.03h0l.01-.112.43-3.007z"/>
    </svg>
  </span>
  <p class="text-truncate me-auto"><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
  <button class="btn d-inline-flex flex-shrink-0 align-items-center justify-content-center p-0 ms-5" data-gs-dismiss="alert" style="width: 2.5rem; height: 2.5rem; background-color: rgba(255, 255, 255, 15%);" type="button" aria-label="Close">
    <svg class="gi gi-x fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M7.613 6.2l.094.083L12 10.585l4.293-4.292.094-.083a1 1 0 0 1 1.403 1.403l-.083.094L13.415 12l4.292 4.293a1 1 0 0 1-1.32 1.497l-.094-.083L12 13.415l-4.293 4.292-.094.083a1 1 0 0 1-1.403-1.403l.083-.094L10.585 12 6.293 7.707a1 1 0 0 1 1.32-1.497z"/>
    </svg>
  </button>
</div>