Default Alerts
This is a primary alert—check it out!
This is a secondary 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!
This is a light alert—check it out!
This is a dark alert—check it out!
<div class="alert alert-primary" role="alert">...</div>
<div class="alert alert-secondary" role="alert">...</div>
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-light" role="alert">...</div>
<div class="alert alert-dark" role="alert">...</div>Rounded Alerts
This is a primary alert—check it out!
This is a secondary 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!
This is a light alert—check it out!
This is a dark alert—check it out!
<div class="alert alert-primary rounded-pill" role="alert">...</div>
<div class="alert alert-secondary rounded-pill" role="alert">...</div>
<div class="alert alert-success rounded-pill" role="alert">...</div>
<div class="alert alert-danger rounded-pill" role="alert">...</div>
<div class="alert alert-warning rounded-pill" role="alert">...</div>
<div class="alert alert-info rounded-pill" role="alert">...</div>
<div class="alert alert-light rounded-pill" role="alert">...</div>
<div class="alert alert-dark rounded-pill" role="alert">...</div>Link Color Alerts
This is a primary alert with an example link. Give it a click if you like.
This is a secondary alert with an example link. Give it a click if you like.
This is a success alert with an example link. Give it a click if you like.
This is a danger alert with an example link. Give it a click if you like.
This is a warning alert with an example link. Give it a click if you like.
This is a info alert with an example link. Give it a click if you like.
This is a light alert with an example link. Give it a click if you like.
This is a dark alert with an example link. Give it a click if you like.
<div class="alert alert-primary" role="alert">
... <a href="#" class="alert-link">an example link</a>. ...
</div>
<div class="alert alert-secondary" role="alert">
... <a href="#" class="alert-link">an example link</a>. ...
</div>
<div class="alert alert-success" role="alert">
... <a href="#" class="alert-link">an example link</a>. ...
</div>
<div class="alert alert-danger" role="alert">
... <a href="#" class="alert-link">an example link</a>. ...
</div>
<div class="alert alert-warning" role="alert">
... <a href="#" class="alert-link">an example link</a>. ...
</div>
<div class="alert alert-info" role="alert">
... <a href="#" class="alert-link">an example link</a>. ...
</div>
<div class="alert alert-light" role="alert">
... <a href="#" class="alert-link">an example link</a>. ...
</div>
<div class="alert alert-dark" role="alert">
... <a href="#" class="alert-link">an example link</a>. ...
</div>Dismissing Alerts
Holy primary! You should check in on some of those fields below.
Holy secondary! You should check in on some of those fields below.
Holy success! You should check in on some of those fields below.
Holy danger! You should check in on some of those fields below.
Holy warning! You should check in on some of those fields below.
Holy info! You should check in on some of those fields below.
Holy light! You should check in on some of those fields below.
Holy dark! You should check in on some of those fields below.
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<strong>Holy primary!</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>
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
<strong>Holy secondary!</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>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Holy success!</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>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Holy danger!</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>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy warning!</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>
<div class="alert alert-info alert-dismissible fade show" role="alert">
<strong>Holy info!</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>
<div class="alert alert-light alert-dismissible fade show" role="alert">
<strong>Holy light!</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>
<div class="alert alert-dark alert-dismissible fade show" role="alert">
<strong>Holy dark!</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>Additional Content Alerts
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.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>........................................</p>
<hr>
<p class="mb-0">......................................</p>
</div>