ALERTS

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

<div class="alert alert-success mb-30"><!-- SUCCESS -->
	<button type="button" class="close" data-dismiss="alert">
		<span aria-hidden="true">×</span>
		<span class="sr-only">Close</span>
	</button>
	<strong>Well done!</strong> You successfully read this important alert message.
</div>


<div class="alert alert-info mb-30"><!-- INFO -->
	<button type="button" class="close" data-dismiss="alert">
		<span aria-hidden="true">×</span>
		<span class="sr-only">Close</span>
	</button>
	<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>


<div class="alert alert-warning mb-30"><!-- WARNING -->
	<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>


<div class="alert alert-danger mb-30"><!-- DANGER -->
	<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>


<div class="alert alert-default mb-30"><!-- DEFAULT -->
	<strong>Default one!</strong> Nothing special, only a default alert!
</div>

Wrap any text and an optional dismiss button in .alert and .alert-mini.

<div class="alert alert-mini alert-success mb-30"><!-- SUCCESS -->
	<button type="button" class="close" data-dismiss="alert">
		<span aria-hidden="true">×</span>
		<span class="sr-only">Close</span>
	</button>
	<strong>Well done!</strong> You successfully read this important alert message.
</div>


<div class="alert alert-mini alert-info mb-30"><!-- INFO -->
	<button type="button" class="close" data-dismiss="alert">
		<span aria-hidden="true">×</span>
		<span class="sr-only">Close</span>
	</button>
	<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>


<div class="alert alert-mini alert-warning mb-30"><!-- WARNING -->
	<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>


<div class="alert alert-mini alert-danger mb-30"><!-- DANGER -->
	<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>


<div class="alert alert-mini alert-default mb-30"><!-- DEFAULT -->
	<strong>Default one!</strong> Nothing special, only a default alert!
</div>

<div class="alert alert-bordered-dotted mb-30"><!-- DOTTED --></span>
	<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	<h4><strong>Lorem ipsum dolor sit amet</strong></h4>
	<p>Aharum quidem rerum facilis est et expedita distinctio lorem ipsum.</p>
</div>

<div class="alert alert-bordered-dashed mb-30"><!-- DASHED --></span>
	<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	<h4><strong>Lorem ipsum dolor sit amet</strong></h4>
	<p>Aharum quidem rerum facilis est et expedita distinctio lorem ipsum.</p>
</div>

<div class="alert alert-bordered mb-30"><!-- BORDERED --></span>
	<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	<h4><strong>Lorem ipsum dolor sit amet</strong></h4>
	<p>Aharum quidem rerum facilis est et expedita distinctio lorem ipsum.</p>
</div>

<div class="alert alert-dark mb-30"><!-- DARK --></span>
<h4><strong>Lorem ipsum dolor sit amet</strong></h4>
	<p>Aharum quidem rerum facilis est et expedita distinctio lorem ipsum.</p>
</div>

<div class="alert alert-theme-color mb-30"><!-- THEME COLOR --></span>
<h4><strong>Lorem ipsum dolor sit amet</strong></h4>
	<p>Aharum quidem rerum facilis est et expedita distinctio lorem ipsum.</p>
</div>

<!--
	ALERT CLASSES
	alert-success
	alert-info
	alert-warning
	alert-default
	

-->
<div class="alert alert-warning mb-30"><!-- SUCCESS -->
	<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
	
	<h4>Purchase <strong>Smarty Template</strong></h4>

	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</p>

	<a href="#purchase" class="btn btn-info btn-sm mt-10">I Agree</a>
	<a href="#" class="btn btn-default btn-sm mt-10">Cancel</a>
</div>