The alert pattern is used to convey important information to users.
alert-link class to quickly provide matching coloured links within any alert.div with a class of alert plus one of the four option classes:
alert-successalert-infoalert-warningalert-dangerUse the class .alert-success for a success alert box. This alert box indicates a successful or positive action, such as successfully submitting a form.
<!-- Begin pattern: alerts //-->
<div class="alert alert-success" role="alert">
Thank you for submitting your details. If you have any questions please email <a href="mailto:#" class="alert-link">example@st-andrews.ac.uk</a>.
</div>
<!-- End pattern: alerts //-->
Use the class alert-info for an info alert box. This alert box indicates neutral information or a neutral action, such as a recommendation or an update.
<!-- Begin pattern: alerts //-->
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> We recommend that you apply soon for a place on our <a href="#" class="alert-link">poetry course</a>.
</div>
<!-- End pattern: alerts //-->
Use the class alert-warning for a warning alert box. This alert box indicates a warning that might need attention or carries a time limit, such as impending application deadlines.
<!-- Begin pattern: alerts //-->
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> The deadline for submissions is the end of Semester 2. If you need help, please email <a href="mailt:#" class="alert-link">example@st-andrews.ac.uk</a>.
</div>
<!-- End pattern: alerts //-->
Use the class alert-danger for a danger alert box. This alert box indicates a dangerous or potentially negative action such as closures or expired deadlines.
<!-- Begin pattern: alerts //-->
<div class="alert alert-danger" role="alert">
<strong>Warning!</strong> The deadline for submissions has passed. If you need help please email <a href="mailto:#" class="alert-link">example@st-andrews.ac.uk</a>.
</div>
<!-- End pattern: alerts //-->
