Default Alert
Primary - A simple primary
alert—check it out!
Secondary - A simple secondary
alert—check it out!
Success - A simple success
alert—check it out!
Error - A simple danger alert—check
it out!
Warning - A simple warning
alert—check it out!
Info - A simple info alert—check it
out!
Light - A simple light alert—check
it out!
Dark - A simple dark alert—check it
out!
Code Here:
<div class="alert alert-primary" role="alert">
<strong>Primary - </strong> A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
<strong>Secondary - </strong> A simple secondary alert—check it out!
</div>
<div class="alert alert-light-success" role="alert">
<strong>Success - </strong> A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
<strong>Error - </strong> A simple danger alert—check it out!
</div>
<div class="alert alert-warning bg-warning text-white border-0" role="alert">
<strong>Warning - </strong> A simple warning alert—check it out!
</div>
<div class="alert alert-light-info bg-info text-white border-0" role="alert">
<strong>Info - </strong> A simple info alert—check it out!
</div>
<div class="alert alert-light bg-light text-dark border-0" role="alert">
<strong>Light - </strong> A simple light alert—check it out!
</div>
<div class="alert alert-dark bg-dark text-white border-0 mb-0" role="alert">
<strong>Dark - </strong> A simple dark alert—check it out!
</div>
Dismissing Alerts
Primary - A simple primary
alert—check it out!
Secondary - A simple secondary
alert—check it out!
Success - A simple success
alert—check it out!
Error - A simple danger alert—check
it out!
Warning - A simple warning
alert—check it out!
Info - A simple info alert—check it
out!
Light - A simple light alert—check
it out!
Dark - A simple dark alert—check it
out!
Code Here
<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—check it out!
</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—check it out!
</div>
<div class="alert alert-light-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—check it out!
</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—check it out!
</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—check it out!
</div>
<div class="alert alert-light-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—check it out!
</div>
<div class="alert alert-light alert-dismissible fade show" role="alert">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
<strong>Light - </strong> A simple light alert—check it out!
</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—check it out!
</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!
Code Here
<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 font-medium">
<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 font-medium">
<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 font-medium">
<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 font-medium">
<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 font-medium">
<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 font-medium">
<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.
Code Here
<div class="alert alert-light-success text-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
Adminpro and tidy.
</p>
</div>