Alerts

Use these alerts to inform your visitors, you can also use markup inside as you see fit. For example you can use <b>,<i>, even some of our shortcodes or any other mark up you see fit to stand out parts of your text inside the alert. You have 4 different options for alerts: .alert-success, .alert-info, .alert-warning, and .alert-danger. See them displayed below, they are easily customized into dismisable alerts as well.

<div class="alert alert-success" role="alert"><b>Well done!</b> You successfully read this important alert message.</div>
<div class="alert alert-info" role="alert"><b>Look ahead!</b> I have some simple information I want to tell you.</div>
<div class="alert alert-warning" role="alert"><b>Hold on.</b> I seriously want to warn you about something.</div>
<div class="alert alert-danger" role="alert"><b>Be careful.</b> Something dangerous lies ahead of you, son.</div>

To use Raleway Alerts simply add class .alert-*-rw to the alert div.

<div class="alert alert-success alert-success-rw" role="alert"><b>Well done!</b> You successfully read this important alert message.</div>
<div class="alert alert-info alert-info-rw" role="alert"><b>Look ahead!</b> I have some simple information I want to tell you.</div>
<div class="alert alert-warning alert-warning-rw" role="alert"><b>Hold on.</b> I seriously want to warn you about something.</div>
<div class="alert alert-danger alert-danger-rw" role="alert"><b>Be careful.</b> Something dangerous lies ahead of you, son.</div>
<div class="alert alert-clear" role="alert"<<b<Steady.</b< I am simple clear alert to use accross the theme.</div<

Adding to a static alert to make it dismisable is very simple, simply add the class .alert-dismisable to the main alert <div> and just add a close button.

<!--=== Default Dismisable Alert Success ===-->
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
	<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<b>Well done!</b> You successfully read this important alert message.
</div>

<!--=== Default Dismisable Alert Info ===-->
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
	<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<b>Look ahead!</b> I have some simple information I want to tell you.
</div>

<!--=== Default Dismisable Alert Warning ===-->
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
	<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<b>Hold on.</b> I seriously want to warn you about something.
</div>

<!--=== Default Dismisable Alert Danger ===-->
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
	<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<b>Be careful.</b> Something dangerous lies ahead of you, son.
</div>

<!--=== Raleway Dismisable Alert Success ===-->
<div class="alert alert-success alert-success-rw alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
	<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<b>Well done!</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non imperdiet elit, eget tempor felis. Curabitur dictum convallis ante vitae pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac est quam.
</div>

<!--=== Raleway Dismisable Alert Info ===-->
<div class="alert alert-info alert-info-rw alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
	<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<b>Look ahead!</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non imperdiet elit, eget tempor felis. Curabitur dictum convallis ante vitae pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac est quam.
</div>

<!--=== Raleway Dismisable Alert Warning ===-->
<div class="alert alert-warning alert-warning-rw alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
	<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<b>Hold on.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non imperdiet elit, eget tempor felis. Curabitur dictum convallis ante vitae pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac est quam.
</div>

<!--=== Raleway Dismisable Alert Danger ===-->
<div class="alert alert-danger alert-danger-rw alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
	<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<b>Be careful.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non imperdiet elit, eget tempor felis. Curabitur dictum convallis ante vitae pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac est quam.
</div>

<!--=== Raleway Dismisable Alert Clear ===-->
<div class="alert alert-clear alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
 	<b>Steady.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non imperdiet elit, eget tempor felis. Curabitur dictum convallis ante vitae pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac est quam.
</div>

Alerts are highly customizable and you can add whatever content you need to them :) here are some alerts with simple links. Use the .alert-link utility class to quickly provide matching colored links within any alert.

<div class="alert alert-success" role="alert">
<b>Well done!</b> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>

<div class="alert alert-info alert-info-rw" role="alert">
<b>Heads up!</b> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>