---
title: Notifications
slug: ui-notifications
---
{% extends "layouts/components.html" %}

{% block page %}
<!-- Breadcrumb -->
<ol class="breadcrumb">
	<li><a href="index.html">Home</a></li>
	<li class="active">Notifications</li>
</ol>
<div class="card">
	<div class="card-header">
		<h4 class="card-title">Labels</h4>
	</div>
	<div class="card-block">
		<span class="label label-default">Default</span>
		<span class="label label-primary">Primary</span>
		<span class="label label-success">Success</span>
		<span class="label label-info">Info</span>
		<span class="label label-warning">Warning</span>
		<span class="label label-danger">Danger</span>
		<hr>
		<span class="label label-pill label-default">Default</span>
		<span class="label label-pill label-primary">Primary</span>
		<span class="label label-pill label-success">Success</span>
		<span class="label label-pill label-info">Info</span>
		<span class="label label-pill label-warning">Warning</span>
		<span class="label label-pill label-danger">Danger</span>
	</div>
</div>

<div class="card">
	<div class="card-header">
		<h4 class="card-title">Alerts</h4>
	</div>
	<div class="card-block">
		<div class="alert alert-success" role="alert">
		  <strong>Well done!</strong> You successfully read this important alert message.
		</div>
		<div class="alert alert-info" role="alert">
		  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
		</div>
		<div class="alert alert-warning" role="alert">
		  <strong>Warning!</strong> Better check yourself, you're not looking too good.
		</div>
		<div class="alert alert-danger" role="alert">
		  <strong>Oh snap!</strong> Change a few things up and try submitting again.
		</div>
		<hr>
		<div class="alert alert-warning alert-dismissible fade in" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">&times;</span>
			</button>
			<strong>Holy guacamole!</strong> You should check in on some of those fields below.
		</div>
	</div>
</div>

<div class="jumbotron">
	<p class="lead">SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!</p>
</div>

<div class="card-group">
	<div class="card">
		<div class="card-block">
			<p>A basic message</p>
			<button class="btn btn-primary try-sweet-simpleMessage">Try Alert!</button>
		</div>
	</div>
	<div class="card">
		<div class="card-block">
			<p>A title with a text under</p>
			<button class="btn btn-primary try-sweet-simpleTitle">Try Alert!</button>
		</div>
	</div>
	<div class="card">
		<div class="card-block">
			<p>A success message!</p>
			<button class="btn btn-success try-sweet-successMessage">Try Alert!</button>
		</div>
	</div>
</div>

<div class="card-group">
	<div class="card">
		<div class="card-block">
			<p>A warning message, with a function attached to the "Confirm"-button...</p>
			<button class="btn btn-warning try-sweet-warningConfirm">Try Alert!</button>
		</div>
	</div>
	<div class="card">
		<div class="card-block">
			<p>... and by passing a parameter, you can execute something else for "Cancel".</p>
			<button class="btn btn-danger try-sweet-warningCallback">Try Alert!</button>
		</div>
	</div>
	<div class="card">
		<div class="card-block">
			<p>An html message</p>
			<button class="btn btn-primary try-sweet-htmlMessage">Try Alert!</button>
		</div>
	</div>
</div>

<div class="jumbotron">
	<h2>Bootstrap Modal</h2>
	<p class="lead">Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
</div>

<div class="card">
	<div class="card-block">
		Trigger Modal with :
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
			Button
		</button>
	</div>
</div>
{% endblock %}

{% block footer %}
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
			</div>
			<div class="modal-body">
				...
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
{% endblock %}

{% block vendor_styling %}
	<!-- Vendor CSS -->
	<link rel="stylesheet" href="examples/css/sweetalert.min.css">
{% endblock %}

{% block vendor_scripts %}
	<!-- Vendor JS -->
	<script src="assets/vendor/sweetalert.min.js"></script>
{% endblock%}

{% block example_scripts %}
	<!-- Initialize -->
	<script src="examples/js/sweetalert.js"></script>
{% endblock %}