Bootstrap 4 Alerts


Bootstrap 4 Alerts

Bootstrap requires an .alert class to create an alert message.

This is a basic alert box

Example code

<div class="alert alert-light">
	This is a basic alert box
</div>

Alert with links

To insert a link inside an alert box, use the .alert-link class.

This is a basic alert box Read more

Example code

<div class="alert alert-success">
	This is a basic alert box 
<a href="#" class="alert-link">Read more</a>
</div>

Alert with contextual classes

To add a background color to an alert box, you need to add contextual classes. Cotextual classes are .alert-primary, .alert-secondary, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-dark and .alert-light.

Primary! This is a basic alert box Read more
Secondary! This is a basic alert box Read more
Success! This is a basic alert box Read more
Info! This is a basic alert box Read more
Warning! This is a basic alert box Read more
Danger! This is a basic alert box Read more
Dark! This is a basic alert box Read more
Light! This is a basic alert box Read more

Example code

<div class="alert alert-primary">
	<strong>Primary! </strong>This is a basic alert box <a href="#" class="alert-link">Read more</a>
</div>
<div class="alert alert-secondary">
	<strong>Secondary! </strong>This is a basic alert box <a href="#" class="alert-link">Read more</a>
</div>
<div class="alert alert-success">
	<strong>Success! </strong>This is a basic alert box <a href="#" class="alert-link">Read more</a>
</div>
<div class="alert alert-info">
	<strong>Info! </strong>This is a basic alert box <a href="#" class="alert-link">Read more</a>
</div>
<div class="alert alert-warning">
	<strong>Warning! </strong>This is a basic alert box <a href="#" class="alert-link">Read more</a>
</div>
<div class="alert alert-danger">
	<strong>Danger! </strong>This is a basic alert box <a href="#" class="alert-link">Read more</a>
</div>
<div class="alert alert-dark">
	<strong>Dark! </strong>This is a basic alert box <a href="#" class="alert-link">Read more</a>
</div>
<div class="alert alert-light">
	<strong>Light! </strong>This is a basic alert box <a href="#" class="alert-link">Read more</a>
</div>

Alert with close button

To put a close button in an alert box

This is a basic alert box Read more

Example code

<div class="alert alert-success alert-dismissible">
<button class="close" data-dismiss="alert">&times;</button>
	This is a basic alert box <a href="#" class="alert-link">Read more</a>
</div>

Alert with animated close button

Same as normal close button and adding .fade and .show classes into the alert container.

This is a basic alert box Read more

Example code

<div class="alert alert-success alert-dismissible fade show">
<button class="close" data-dismiss="alert">&times;</button>
	This is a basic alert box <a href="#" class="alert-link">Read more</a>
</div>