Alert

Contrast Bootstrap Alert can be used to provide feedback messages to users after specific actions are carried out.

Examples

Contrast Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the contextual props (e.g., color="success"). For inline dismissal, use the dismiss prop.

html

  <div
    class="alert alert-primary"
    style="width: fit-content"
    role="alert"
  >
    A simple alert built with contrast design check it out!
  </div>
  <div
    class="alert alert-secondary"
    style="width: fit-content"
    role="alert"
  >
    A simple alert built with contrast design check it out!
  </div>
  <div
    class="alert alert-success"
    style="width: fit-content"
    role="alert"
  >
    A simple alert built with contrast design check it out!
  </div>
  <div
    class="alert alert-danger"
    style="width: fit-content"
    role="alert"
  >
    A simple alert built with contrast design check it out!
  </div>
  <div
    class="alert alert-warning"
    style="width: fit-content"
    role="alert"
  >
    A simple alert built with contrast design check it out!
  </div>
  <div class="alert alert-info" style="width: fit-content" role="alert">
    A simple alert built with contrast design check it out!
  </div>
  <div class="alert alert-dark" style="width: fit-content" role="alert">
    A simple alert built with contrast design check it out!
  </div>

Dismissable Alert Button

HTML

  <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-dismiss="alert"
      aria-label="Close"
    ></button>
  </div>

Dismissable Alert Button with Javascript

HTML

  <div
    class="alert alert-warning alert-dismissible fade show"
    id="alert1"
    role="alert"
  >
    Hey Dismiss me using Javascript
  </div>
  <button id="dismiss1" class="btn btn-dark btn-flat mt-4">
    Dismiss Alert
  </button>
</div>

Script

<script>
  document.querySelector('#dismiss1').addEventListener('click', () => {
    var alertNode = document.querySelector('#alert1');
    var alert = new bootstrap.Alert(alertNode);
    alert.close();
  });
</script>

Table

Animation