<style>
	/* page-specific styling */
	.btn-block {margin-bottom: 10px;}
</style>

    <ol class="breadcrumb">
		<li><a href="#/">Dashboard</a></li>
		<li>Components</li>
		<li class="active">Pulsating Elements</li>
	</ol>


<div class="container-fluid">
	<div data-widget-group="group1">
		<div class="row">
			<div class="col-md-12">

				<div class="alert alert-info">
					<h3>jQuery Pulsate</h3>
					<p>jQuery.pulsate.js adds a pulsating effect to elements. Useful for drawing the users attention.</p>
				</div>


				<div class="panel panel-default" data-widget='{"draggable": "false"}'>
				  <div class="panel-heading">
				  	<h2>Pulsate</h2>
				  	<div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div>
				  </div>
				  <div class="panel-body">
						<div class="row mb-md">
							<div class="col-md-4 col-xs-6">
								<button class="btn btn-orange btn-block" data-pulsate="{glow:false}">.pulsate({glow:false});</button>
							</div>
							<div class="col-md-4 col-xs-6">
								<button class="btn btn-midnightblue btn-block" data-pulsate="{color:'#09f'}">.pulsate({color:"#09f"});</button>
							</div>
							<div class="col-md-4 col-xs-6">
								<button class="btn btn-green btn-block" data-pulsate="{reach:100}">.pulsate({reach:100});</button>
							</div>
						</div>
						<div class="row">
							<div class="col-md-4 col-xs-6">
								<button class="btn btn-magenta btn-block" data-pulsate="{speed:2500}">.pulsate({speed:2500});</button>
							</div>
							<div class="col-md-4 col-xs-6">
								<button class="btn btn-brown btn-block" data-pulsate="{pause:1000}">.pulsate({pause:1000});</button>
							</div>
							<div class="col-md-4 col-xs-6">
								<button class="btn btn-inverse btn-block" data-pulsate="{onHover:true}">.pulsate({onHover:true});</button>
							</div>
						</div>
				  </div>
				</div>
			</div>
		</div>
	</div>
</div> <!-- container-fluid -->
