Alerts

Default Alert

Default Alert
Source Code
1
<div class="alert alert-primary" role="alert">
2
A simple primary alert—check it out!
3
</div>
4
5
<!--
6
Above is an example of primary alert. You can use the
7
BootStrap classes .alert-secondary, .alert-success,
8
.alert-danger, .alert-warning, .alert-info, .alert-light
9
and .alert-dark to generate the type of default alert
10
you want.
11
-->
Copied!
Alert with Link
Source Code
1
<div class="alert alert-primary" role="alert">
2
A simple primary alert with <a href="javascript:void(0)" class="alert-link">an
3
example link</a>. Give it a click if you like.
4
</div>
Copied!

Additional Content Alert

Additional Content Alerts
Source Code
1
<div class="alert alert-success" role="alert">
2
<h4 class="alert-heading">Well done!</h4>
3
<p>
4
Aww yeah, you successfully read this important
5
alert message. This example text is going to run
6
a bit longer so that you can see how spacing
7
within an alert works with this kind of content.
8
</p>
9
<hr>
10
<p class="mb-0">
11
Whenever you need to, be sure to use margin utilities to keep
12
things nice and tidy.
13
</p>
14
</div>
Copied!

Dismissing Alert

Dismissing Alerts
Source Code
1
<div class="alert alert-primary alert-dismissible fade show" role="alert">
2
<strong>Holy guacamole!</strong> You should check in on some of those fields
3
below.
4
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
5
<span aria-hidden="true">×</span>
6
</button>
7
</div>
Copied!
Last modified 1yr ago