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-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-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="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</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="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Secondary - </strong> A simple secondary alert—check it out!
</div>
<div class="alert alert-success alert-dismissible bg-success text-white border-0 fade show"
role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</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="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</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="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Warning - </strong> A simple warning alert—check it out!
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</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="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</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="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Dark - </strong> A simple dark alert—check it out!
</div>
Custom Alerts
This is a primary 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!
Code Here
<div class="alert alert-primary bg-white text-primary" role="alert">
This is a <strong>primary</strong> alert—check it out!
</div>
<div class="alert alert-success" role="alert">
<i class="dripicons-checkmark mr-2"></i> This is a <strong>success</strong> alert -
check it out!
</div>
<div class="alert alert-danger" role="alert">
<i class="dripicons-wrong mr-2"></i> This is a <strong>danger</strong> alert - check
it out!
</div>
<div class="alert alert-warning" role="alert">
<i class="dripicons-warning mr-2"></i> This is a <strong>warning</strong> alert -
check it out!
</div>
<div class="alert alert-info" role="alert">
<i class="dripicons-information mr-2"></i> This is a <strong>info</strong> alert -
check it out!
</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 nice and tidy.
Code Here
<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>