Components

<div class="alert alert-primary" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>

	Alert : Primary
</div>

<div class="alert alert-secondary" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>
	Alert : Secondary
</div>

<div class="alert alert-danger" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>
	Alert : Danger
</div>

<div class="alert alert-warning" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>
	Alert : Warning
</div>

<div class="alert alert-info" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>
	Alert : Info
</div>

<div class="alert alert-success" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>
	Alert : Success
</div>

<div class="alert alert-light" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>
	Alert : Light
</div>

<div class="alert alert-indigo" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>
	Alert : Indigo
</div>

<div class="alert alert-purple" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>
	Alert : Purple
</div>

<div class="alert alert-pink" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>
	Alert : Pink
</div>

<div class="alert alert-dark" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>
	Alert : Dark
</div>


<div class="alert alert-success" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>

	<h4 class="alert-heading">Additional Content!</h4>
	<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
	<hr>
	<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>

</div>





<!-- AUTOHIDE + TIMER + CALLBACK -->
<div class="alert alert-primary timer-autohide" role="alert" data-timer-autohide="8000">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span class="fi fi-close" aria-hidden="true"></span>
	</button>

	<i class="fi fi-time fs--16 mt--n1 float-start"></i> Autohide in: 

	<!-- 
		+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
		SOW Countdown Timer
			data-timer-countdown-from="8000" 	
				if data-timer-countdown-from > 1000, is calculated in seconds (time / 1000)
				if data-timer-countdown-from < 1000, is considered seconds
				INSTEAD OF SECONDS/MILLISECONDS, FULL DATE IS SUPPORTED: 	
					2020-11-21T13:19:11+0000
					11/21/2020 16:00:00 
					Fri Jul 14 2020 23:21:03 GMT+0300
					If date is in the past, callback function is not called!

			data-timer-countdown-end-hide-self="true" 					hide self counter finished
			data-timer-countdown-end-hide-target="#container" 			hide one (or more separated by space) containers when finished
				NOTE: in our example, instead of using .timer-autohide, you can use data-timer-countdown-end-hide-target="#my_alert_id"

			Callback Function called when timer hit 00:00:00
			data-timer-countdown-callback-function="myCallbackFunction"
				myCallbackFunction = function(el) {
					// el = countdown element ID. if no #id provided, is added by the plugin
				}

		.hide class is optional, recommended in case the counter is already 00:00:00 for some reason (depends of your backend code)
		+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	-->
	<span class="hide timer-countdown" data-timer-countdown-from="8000" data-timer-countdown-callback-function="myCallbackFunction"></span>
	<script>
		/* timer-countdown : callback function example */
		myCallbackFunction = function(el) {
			$.SOW.core.toast.show('success', '', '<i class="fi fi-time float-start"></i> Timer ended! Like it?', 'top-center', 3000, true);
		}
	</script>
</div>