Alerts

Use our custom alert styles to provide contextual feedback messages for typical user actions. Bootstrap docs

Simple

A simple primary alert with an example link.

A simple secondary alert with an example link.

A simple success alert with an example link.

A simple danger alert with an example link.

A simple warning alert with an example link.

A simple info alert with an example link.

A simple light alert with an example link.

A simple dark alert with an example link.

View example's code

<div class="alert alert-primary alert-icon" role="alert">
  <i class="uil uil-star"></i> A simple primary alert with <a href="#" class="alert-link hover">an example link</a>.
</div>
  
<div class="alert alert-secondary alert-icon" role="alert">
  <i class="uil uil-clock"></i> A simple secondary alert with <a href="#" class="alert-link hover">an example link</a>.
</div>

<div class="alert alert-success alert-icon" role="alert">
  <i class="uil uil-check-circle"></i> A simple success alert with <a href="#" class="alert-link hover">an example link</a>.
</div>

<div class="alert alert-danger alert-icon" role="alert">
  <i class="uil uil-times-circle"></i> A simple danger alert with <a href="#" class="alert-link hover">an example link</a>.
</div>

<div class="alert alert-warning alert-icon" role="alert">
  <i class="uil uil-exclamation-triangle"></i> A simple warning alert with <a href="#" class="alert-link hover">an example link</a>.
</div>

<div class="alert alert-info alert-icon" role="alert">
  <i class="uil uil-exclamation-circle"></i> A simple info alert with <a href="#" class="alert-link hover">an example link</a>.
</div>

<div class="alert alert-light alert-icon" role="alert">
  <i class="uil uil-lock"></i> A simple light alert with <a href="#" class="alert-link hover">an example link</a>.
</div>

<div class="alert alert-dark alert-icon" role="alert">
  <i class="uil uil-map-marker-info"></i> A simple dark alert with <a href="#" class="alert-link hover">an example link</a>.
</div>

Dismissing

A simple primary alert with an example link.

A simple secondary alert with an example link.

A simple success alert with an example link.

A simple danger alert with an example link.

A simple warning alert with an example link.

A simple info alert with an example link.

A simple light alert with an example link.

A simple dark alert with an example link.

View example's code

<div class="alert alert-primary alert-icon alert-dismissible fade show" role="alert">
  <i class="uil uil-star"></i> A simple primary alert with <a href="#" class="alert-link hover">an example link</a>.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-secondary alert-icon alert-dismissible fade show" role="alert">
  <i class="uil uil-clock"></i> A simple secondary alert with <a href="#" class="alert-link hover">an example link</a>.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-success alert-icon alert-dismissible fade show" role="alert">
  <i class="uil uil-check-circle"></i> A simple success alert with <a href="#" class="alert-link hover">an example link</a>.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-danger alert-icon alert-dismissible fade show" role="alert">
  <i class="uil uil-times-circle"></i> A simple danger alert with <a href="#" class="alert-link hover">an example link</a>.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-warning alert-icon alert-dismissible fade show" role="alert">
  <i class="uil uil-exclamation-triangle"></i> A simple warning alert with <a href="#" class="alert-link hover">an example link</a>.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-info alert-icon alert-dismissible fade show" role="alert">
  <i class="uil uil-exclamation-circle"></i> A simple info alert with <a href="#" class="alert-link hover">an example link</a>.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-light alert-icon alert-dismissible fade show" role="alert">
  <i class="uil uil-lock"></i> A simple light alert with <a href="#" class="alert-link hover">an example link</a>.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-dark alert-icon alert-dismissible fade show" role="alert">
  <i class="uil uil-map-marker-info"></i> A simple dark alert with <a href="#" class="alert-link hover">an example link</a>.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox