Notifications
Default Alert
Primary - A simple primary alert
Secondary - A simple secondary alert
Success - A simple success alert
Error - A simple danger alert
Warning - A simple warning alert
Info - A simple info alert
Light - A simple light alert
Dark - A simple dark alert
<div class="alert alert-primary" role="alert"> <strong>Primary - </strong> A simple primary alert </div>
<div class="alert alert-secondary" role="alert"> <strong>Secondary - </strong> A simple secondary alert </div>
<div class="alert alert-success" role="alert"> <strong>Success - </strong> A simple success alert </div>
<div class="alert alert-danger" role="alert"> <strong>Error - </strong> A simple danger alert </div>
<div class="alert alert-warning" role="alert"> <strong>Warning - </strong> A simple warning alert </div>
<div class="alert alert-info" role="alert"> <strong>Info - </strong> A simple info alert </div>
<div class="alert alert-light" role="alert"> <strong>Light - </strong> A simple light alert </div>
<div class="alert alert-dark" role="alert"> <strong>Dark - </strong> A simple dark alert </div>
Dismissing Alerts
Primary - A simple primary alert
Secondary - A simple secondary alert
Success - A simple success alert
Error - A simple danger alert
Warning - A simple warning alert
Info - A simple info alert
Light - A simple light alert
Dark - A simple dark alert
<div class="alert alert-primary alert-dismissible bg-primary text-white border-0 fade show" role="alert"> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> <strong>Primary - </strong> A simple primary alert </div>
<div class="alert alert-secondary alert-dismissible bg-secondary text-white border-0 fade show" role="alert"> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> <strong>Secondary - </strong> A simple secondary alert </div>
<div class="alert alert-success alert-dismissible bg-success text-white border-0 fade show" role="alert"> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> <strong>Success - </strong> A simple success alert </div>
<div class="alert alert-danger alert-dismissible bg-danger text-white border-0 fade show" role="alert"> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> <strong>Error - </strong> A simple danger alert </div>
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> <strong>Warning - </strong> A simple warning alert </div>
<div class="alert alert-info alert-dismissible fade show" role="alert"> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> <strong>Info - </strong> A simple info alert </div>
<div class="alert alert-light alert-dismissible fade show" role="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> <strong>Light - </strong> A simple light alert </div>
<div class="alert alert-dark alert-dismissible fade show mb-0" role="alert"> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button> <strong>Dark - </strong> A simple dark alert </div>
Outline Alerts
A simple primary outline alert—check it out!
A simple secondary outline alert—check it out!
A simple success outline alert—check it out!
A simple danger outline alert—check it out!
A simple warning outline alert—check it out!
A simple info outline alert—check it out!
<div class="alert customize-alert alert-dismissible text-primary border border-primary fade show"
role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div class="d-flex align-items-center ">
<i data-feather="info" class="text-primary feather-sm me-2 flex-shrink-0"></i>
A simple primary outline alert—check it out!
</div>
</div>
<div class="alert customize-alert alert-dismissible border-secondary text-secondary fade show"
role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div class="d-flex align-items-center ">
<i data-feather="info" class="text-secondary fill-white feather-sm me-2"></i>
A simple secondary outline alert—check it out!
</div>
</div>
<div class="alert customize-alert alert-dismissible border-success text-success fade show"
role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div class="d-flex align-items-center ">
<i data-feather="info" class="text-success fill-white feather-sm me-2"></i>
A simple success outline alert—check it out!
</div>
</div>
<div class="alert customize-alert alert-dismissible border-danger text-danger fade show"
role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div class="d-flex align-items-center ">
<i data-feather="info" class="text-danger fill-white feather-sm me-2"></i>
A simple danger outline alert—check it out!
</div>
</div>
<div class="alert customize-alert alert-dismissible border-warning text-warning fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div class="d-flex align-items-center ">
<i data-feather="info" class="text-warning feather-sm me-2"></i>
A simple warning outline alert—check it out!
</div>
</div>
<div class="alert customize-alert alert-dismissible border-info text-info fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div class="d-flex align-items-center ">
<i data-feather="info" class="text-info feather-sm me-2"></i>
A simple info outline alert—check it out!
</div>
</div>
Additional content
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 Adminpro and tidy.
<div class="alert alert-success mb-0" 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
Adminpro and tidy.
</p>
</div>