---
title: Alerts
page-menu: base.alerts
page-header: Alerts
layout: default
permalink: alerts.html
---

<div class="row row-cards">
	<div class="col-lg-6">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Basic alerts</h2>
				<p class="text-secondary">Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
				{% include "ui/alert.html" type="success" %}
				{% include "ui/alert.html" type="warning" %}
				{% include "ui/alert.html" type="danger" %}
				{% include "ui/alert.html" type="info" %}
			</div>
		</div>
	</div>
	<div class="col-lg-6">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Alerts with icon</h2>
				<p class="text-secondary">Build on any alert by adding an optional icon.</p>
				{% include "ui/alert.html" type="success" show-icon=true %}
				{% include "ui/alert.html" type="warning" show-icon=true %}
				{% include "ui/alert.html" type="danger" show-icon=true %}
				{% include "ui/alert.html" type="info" show-icon=true %}
			</div>
		</div>
	</div>
	<div class="col-lg-6">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Dismissible alerts</h2>
				<p class="text-secondary">Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
				{% include "ui/alert.html" type="success" show-icon=true show-close=true %}
				{% include "ui/alert.html" type="warning" show-icon=true show-close=true %}
				{% include "ui/alert.html" type="danger" show-icon=true show-close=true %}
				{% include "ui/alert.html" type="info" show-icon=true show-close=true %}
			</div>
		</div>
	</div>
	<div class="col-lg-6">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Alert with a description</h2>
				<p class="text-secondary">Add a description to the alert to provide additional information.</p>
				{% include "ui/alert.html" type="success" show-description=true show-icon=true %}
				{% include "ui/alert.html" type="warning" show-description=true show-icon=true %}
				{% include "ui/alert.html" type="danger" show-description=true show-icon=true %}
				{% include "ui/alert.html" type="info" show-description=true show-icon=true %}
			</div>
		</div>
	</div>
	<div class="col-lg-6">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Important alerts</h2>
				{% include "ui/alert.html" important=true type="success" show-icon=true show-close=true %}
				{% include "ui/alert.html" important=true type="warning" show-icon=true show-close=true %}
				{% include "ui/alert.html" important=true type="danger" show-icon=true show-close=true %}
				{% include "ui/alert.html" important=true type="info" show-icon=true show-close=true %}
			</div>
		</div>
	</div>
</div>