Alert Styles
Alert classes should be added to a <div> element with the text inside the div tags.
<div class="alert"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eaque </div>
Standard Alert
class="alert"
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eaque reprehenderit eligendi ducimus velit, consequuntur dolore ratione. Aliquid iste distinctio eveniet voluptate illum, repellat adipisci laudantium incidunt debitis perferendis quod.
Success Alert
class="alert alert-success"
Voluptatem ut nisi magnam dolorem dolore quo, accusamus sequi voluptatibus amet laborum adipisci ipsa architecto? In, sunt molestiae nihil accusamus explicabo animi maxime molestias autem fuga, adipisci deleniti. Illo, nemo!
Danger Alert
class="alert alert-danger"
Dolorem eligendi voluptate nulla, recusandae quod molestiae, omnis veritatis tempora cum fuga et nemo molestias, minima? Nemo voluptatibus, cumque. Ducimus at, delectus, enim repellat veniam culpa iure placeat eos quos.
Danger Alert Alt
class="alert-danger-alt"
If you are in danger, dial 911
Info Alert
class="alert alert-info"
Aspernatur dolorum fuga optio? Cumque laboriosam, officiis quae voluptas. Odit quam veritatis ipsum iure assumenda voluptates obcaecati consequuntur porro, delectus sunt ipsa blanditiis atque nihil eius, voluptatibus quos et. Deserunt!
Dismissable Alert
Can be used with any of the alert styles, except the Danger Alert Alt.
SUU Emergency Notification
This is a test of the SUU Emergency Notification System. In the event of an actual emergency, further details would be provided here.
The HTML for a dismissable alert:
<div class="alert"> <a aria-hidden="true" class="close alert-close fas fa-times fa-2x">
<span class="sr-only">Close modal</span>
</a> <h1>SUU Emergency Notification</h1> <p>This is a test of the SUU Emergency Notification System. In the event of an actua
emergency, further details would be provided here.</p> </div>