Bootstrap 5 Alerts

Alerts are very important to show user friendly message on any action perform.

Alerts are supported in all base colors

.alert-primary
.alert-success
.alert-danger
.alert-warning
.alert-info
.alert-light
.alert-dark

Example

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

Output

Link color In Alert

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">link</a>
</div>

Output

Additional content

You can give a more meaningful message to user

Example

<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>

Output

Icons

You can use flexbox utilities and Bootstrap Icons to create alerts with icons.

Example

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>

Output

Dismissing

Add removeable to your alerts

Example

<strong>Holy guacamole!</strong> You should check in on some of those fields below.

</div>

Output

Getting Started

Layout

Customize

Content

Forms

Components

Utlities

Bootstrap 5 Alerts