W3CoreUI

Alert.

Make use of Bootstrap's unique Alert styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.

Alert on Bootstrap

Basic Alerts

Alerts display different Bootstrap color classes .alert-info, alert-success, alert-warning, alert-danger

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!


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

Link color

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

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.


<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Additional content

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

Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.


<div class="alert alert-success" role="alert">
  <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>

Icons

Use icons to visually enhance informational alerts in Bootstrap

An example alert with an icon

An example success alert with an icon

An example warning alert with an icon

An example danger alert with an icon


<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="flex-shrink-0 me-2" role="img" aria-label="Info" width="20" height="20">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </svg>
  <div>An example alert with an icon</div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="flex-shrink-0 me-2" role="img" aria-label="Success" width="20" height="20">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </svg>
  <div>An example success alert with an icon</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="flex-shrink-0 me-2" role="img" aria-label="Warning" width="20" height="20">
    <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 warning alert with an icon</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="flex-shrink-0 me-2" role="img" aria-label="Warning" width="20" height="20">
    <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 danger alert with an icon</div>
</div>

Dismissing

Use icons to visually enhance dismissible informational alerts in Bootstrap.

Success! Message has been sent.

Info! You have got 5 new email.

Warning! Something went wrong. Please check.

Error! Message Sending failed.


<div class="alert alert-primary alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    <span><i class="fa-solid fa-xmark"></i></span>
  </button>
  <strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-secondary alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    <span><i class="fa-solid fa-xmark"></i></span>
  </button>
  <strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-success alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    <span><i class="fa-solid fa-xmark"></i></span>
  </button>
  <strong>Success!</strong> Message has been sent.
</div>
<div class="alert alert-info alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    <span><i class="fa-solid fa-xmark"></i></span>
  </button>
  <strong>Info!</strong> You have got 5 new email.
</div>
<div class="alert alert-warning alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    <span><i class="fa-solid fa-xmark"></i></span>
  </button>
  <strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert alert-danger alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    <span><i class="fa-solid fa-xmark"></i></span>
  </button>
  <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-dark alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    <span><i class="fa-solid fa-xmark"></i></span>
  </button>
  <strong>Error!</strong> Message Sending failed.
</div>
<div class="alert alert-light alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
    <span><i class="fa-solid fa-xmark"></i></span>
  </button>
  <strong>Error!</strong> Message Sending failed.
</div>