Use the alert class to show a default alert.

<div class="alert alert-primary" role="alert">
	A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
	A simple secondary alert—check it out!
</div>
<div class="alert alert-light" role="alert">
	A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
	A simple dark alert—check it out!
</div>
<div class="alert alert-info" role="alert">
	A simple info alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
	A simple warning alert—check it out!
</div>
<div class="alert alert-success" role="alert">
	A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
	A simple danger alert—check it out!
</div>

Use the alert-borderless class to show a borderless alert.

Use the alert-dismissible class to add dismissing button to alert

Use the alert-link class at <a> tag to show matching colored links within the given alert

Use the alert-outline class to set an alert with outline.

Use the alert-border-left class to set an alert with the left border & outline.

Use the alert-label-icon class to set an alert with a label icon.

Use the alert-label-icon class to set an alert with a label icon.

Use the alert-solid class to set an alert with solid style.

Use the alert-top-border class to set an alert with the left border & outline.

Use the alert-label-icon label-arrow class to show an alert with label icon and arrow.

Use the alert-label-icon rounded-label class to set an alert with a rounded label icon