Alerts
Dokumentasi Bootstrap Alerts
This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a info alert—check it out!
This is a light alert—check it out!
This is a dark alert—check it out!
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>
Soft style
This is a soft primary alert—check it out!
This is a soft secondary alert—check it out!
This is a soft success alert—check it out!
This is a soft danger alert—check it out!
This is a soft warning alert—check it out!
This is a soft info alert—check it out!
This is a soft light alert—check it out!
This is a soft dark alert—check it out!
<div class="alert alert-soft-primary" role="alert">
This is a soft primary alert—check it out!
</div>
<div class="alert alert-soft-secondary" role="alert">
This is a soft secondary alert—check it out!
</div>
<div class="alert alert-soft-success" role="alert">
This is a soft success alert—check it out!
</div>
<div class="alert alert-soft-danger" role="alert">
This is a soft danger alert—check it out!
</div>
<div class="alert alert-soft-warning" role="alert">
This is a soft warning alert—check it out!
</div>
<div class="alert alert-soft-info" role="alert">
This is a soft info alert—check it out!
</div>
<div class="alert alert-soft-light" role="alert">
This is a soft light alert—check it out!
</div>
<div class="alert alert-soft-dark" role="alert">
This is a soft dark alert—check it out!
</div>
Link color
This is a primary alert with an example link. Give it a click if you like.
This is a primary alert with an example link. Give it a click if you like.
<div class="alert alert-primary" role="alert">
This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-soft-primary" role="alert">
This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
With Icon
Information: Alert with icon
<div class="alert alert-primary" role="alert">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-exclamation-triangle-fill"></i>
</div>
<div class="flex-grow-1 ms-2">
Information: Alert with icon
</div>
</div>
</div>
Dismissing
Holy guacamole! You should check in on some of those fields below.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<span class="fw-semi-bold">Holy guacamole!</span> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>