<div class="alert alertSuccess">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alertInfo">
<strong>Info!</strong> This alert box indicates a neutral informative change or action.
</div>
<div class="alert alertWarning">
<strong>Warning!</strong> This alert box indicates a warning that might need attention.
</div>
<div class="alert alertDanger">
<strong>Danger!</strong> This alert box indicates a dangerous or potentially negative
action.
</div>
<div class="alert alertPrimary">
<strong>Primary!</strong> This alert box indicates an important action.
</div>
<div class="alert alertSecondary">
<strong>Secondary!</strong> This alert box indicates a less important action.
</div>
<div class="alert alertSuccess"><strong>Success!</strong> Indicates a successful or positive action.
</div><div class="alert alertInfo"><strong>Info!</strong> This alert box indicates a neutral informative change or action.
</div><div class="alert alertWarning"><strong>Warning!</strong> This alert box indicates a warning that might need attention.
</div><div class="alert alertDanger"><strong>Danger!</strong> This alert box indicates a dangerous or potentially negative
action.
</div><div class="alert alertPrimary"><strong>Primary!</strong> This alert box indicates an important action.
</div><div class="alert alertSecondary"><strong>Secondary!</strong> This alert box indicates a less important action.
</div>
Success! Indicates a successful or positive action.
Info! This alert box indicates a neutral informative change or action.
Warning! This alert box indicates a warning that might need attention.
Danger! This alert box indicates a dangerous or potentially negative
action.
Primary! This alert box indicates an important action.
Secondary! This alert box indicates a less important action.
Alert Links
<div class="alert alertSuccess">
<strong>Success!</strong> You should <a href="#" class="alertLink">read this message</a>.
</div>
<div class="alert alertInfo">
<strong>Info!</strong> You should <a href="#" class="alertLink">read this message</a>.
</div>
<div class="alert alertWarning">
<strong>Warning!</strong> You should <a href="#" class="alertLink">read this message</a>.
</div>
<div class="alert alertDanger">
<strong>Danger!</strong> You should <a href="#" class="alertLink">read this message</a>.
</div>
<div class="alert alertPrimary">
<strong>Primary!</strong> You should <a href="#" class="alertLink">read this message</a>.
</div>
<div class="alert alertSecondary">
<strong>Secondary!</strong> You should <a href="#" class="alertLink">read this message</a>.
</div>
<div class="alert alertSuccess"><strong>Success!</strong> You should <a href="#" class="alertLink">read this message</a>.
</div><div class="alert alertInfo"><strong>Info!</strong> You should <a href="#" class="alertLink">read this message</a>.
</div><div class="alert alertWarning"><strong>Warning!</strong> You should <a href="#" class="alertLink">read this message</a>.
</div><div class="alert alertDanger"><strong>Danger!</strong> You should <a href="#" class="alertLink">read this message</a>.
</div><div class="alert alertPrimary"><strong>Primary!</strong> You should <a href="#" class="alertLink">read this message</a>.
</div><div class="alert alertSecondary"><strong>Secondary!</strong> You should <a href="#" class="alertLink">read this message</a>.
</div>
<div class="alert alertSuccess alertDismiss">
<div class="close">×</div>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alertInfo alertDismiss">
<div class="close">×</div>
<strong>Info!</strong> This alert box indicates a neutral informative change or action.
</div>
<div class="alert alertWarning alertDismiss">
<div class="close">×</div>
<strong>Warning!</strong> This alert box indicates a warning that might need attention.
</div>
<div class="alert alertDanger alertDismiss">
<div class="close">×</div>
<strong>Danger!</strong> This alert box indicates a dangerous or potentially negative
action.
</div>
<div class="alert alertPrimary alertDismiss">
<div class="close">×</div>
<strong>Primary!</strong> This alert box indicates an important action.
</div>
<div class="alert alertSecondary alertDismiss">
<div class="close">×</div>
<strong>Secondary!</strong> This alert box indicates a less important action.
</div>
<div class="alert alertSuccess"><div class="close">×</div><strong>Success!</strong> Indicates a successful or positive action.
</div><div class="alert alertInfo"><div class="close">×</div><strong>Info!</strong> This alert box indicates a neutral informative change or action.
</div><div class="alert alertWarning"><div class="close">×</div><strong>Warning!</strong> This alert box indicates a warning that might need attention.
</div><div class="alert alertDanger"><div class="close">×</div><strong>Danger!</strong> This alert box indicates a dangerous or potentially negative
action.
</div><div class="alert alertPrimary"><div class="close">×</div><strong>Primary!</strong> This alert box indicates an important action.
</div><div class="alert alertSecondary"><div class="close">×</div><strong>Secondary!</strong> This alert box indicates a less important action.
</div>
×
Success! Indicates a successful or positive action.
×
Info! This alert box indicates a neutral informative change or action.
×
Warning! This alert box indicates a warning that might need attention.
×
Danger! This alert box indicates a dangerous or potentially negative
action.
×
Primary! This alert box indicates an important action.
×
Secondary! This alert box indicates a less important action.
Toast
<button class="showToast1">Show Toast</button>
<div class="toast toastJs1">
<div class="toastHeader">
Toast Header
</div>
<div class="toastBody">
Some text inside the toast body
</div>
</div>
<button class="showToast1">Show Toast</button><div class="toast toastJs1"><div class="toastHeader">
Toast Header
</div><div class="toastBody">
Some text inside the toast body
</div></div>
Toast Header
Some text inside the toast body
Show and Hide a Toast
<button class="showToast2">Show Toast</button>
<div class="toast toastJs2" data-autohide="false">
<div class="toastHeader">
Toast Header
<button type="button" class="close">×</button>
</div>
<div class="toastBody">
Some text inside the toast body
</div>
</div>
<button class="showToast1">Show Toast</button><div class="toast toastJs1" data-autohide="false"><div class="toastHeader">
Toast Header
<button type="button" class="close">×</button>
</div><div class="toastBody">
Some text inside the toast body
</div></div>