Alerts

Default Alert

<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

Additional Content Alert

<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 Alert

<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>

PreviousRTL Version NextBadges

Last updated 6 years ago

Was this helpful?

<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>

<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>

<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>