Alerts

Documentation and examples for alerts.

Simple alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p class="alert">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Exist two different ways to get links on alerts, simple link and with a special color.

You need to go this link.

<p class="alert">
  You need to go this <a href="#">link</a>.
</p>

Using the class alert-link on anchor element.

You need to go this link.

<p class="alert">
  You need to go this <a href="#" class="alert-link">link</a>.
</p>

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Lorem ipsum dolor sit amet

Sed eget neque facilisis, congue sem non, pretium lacus. Donec eleifend elit nec leo tempor faucibus. Nulla non turpis quis sapien tristique congue.


Aliquam nec nibh sodales, faucibus ipsum sed, feugiat lacus.

<div class="alert">
  <h4>Lorem ipsum dolor sit amet</h4>
  <p>
    Sed eget neque facilisis, congue sem non, pretium lacus. Donec eleifend elit nec leo tempor faucibus. Nulla non turpis quis sapien tristique congue.
  </p>
  <hr>
  <p>Aliquam nec nibh sodales, faucibus ipsum sed, feugiat lacus.</p>
</div>

Dismissing

For dismiss any alert inline, you need to add the class hidden to the alert-dismissible class with your favorite JS library o your JS framework.

Lorem ipsum! Mauris vel scelerisque orci, non pellentesque justo.
<div class="alert-dismissible">
  <strong>Lorem ipsum!</strong> Mauris vel scelerisque orci, non pellentesque justo.
  <button type="button" class="close">
    <span>&times;</span>
  </button>
</div>