Alerts
Default Alert
Source Code
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<!--
Above is an example of primary alert. You can use the
BootStrap classes .alert-secondary, .alert-success,
.alert-danger, .alert-warning, .alert-info, .alert-light
and .alert-dark to generate the type of default alert
you want.
-->
Alert with Link
Source Code
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="javascript:void(0)" class="alert-link">an
example link</a>. Give it a click if you like.
</div>
Additional Content Alerts
Source Code
<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>
Dismissing Alerts
Source Code
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields
below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
Last modified 3yr ago