Dismissible alert

Using the alert JavaScript plugin CSS code, it’s possible to dismiss any alert inline. Here’s how:

• Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript CSS.
• Each dismissible alert needs its own unique input in front of it and a close label referring to it. In the example below, label[for="alert1close"] is referring to input[id="alert1close"].
• Add a close button in the form of a label with the .btn-close class, which adds extra padding to the right of the alert and positions the close button.
• To show the alert immediately, the .show class is not needed, since this is the default behavior.
• To hide the alert when opening the page, add checked to the input. The second example also demonstrates how to open the alert with a button click.

You can see this in action with a live demo:

<input class="noojs-button" type="checkbox" id="alert1close">
<div class="alert alert-warning alert-dismissible fade" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <label for="alert1close" class="btn-close" aria-label="Close"></label>
</div>

Show the alert after button click

In javascript, the alert is shown by calling $(...).show(); We are only using CSS, so that is not possible. Instead, hide the alert by setting the input[checked] and add a label to show the alert.

<label for="alert1openclose" class="btn btn-primary" aria-label="Open alert"></label>
<input class="noojs-button" type="checkbox" id="alert1openclose">
<div class="alert alert-warning alert-dismissible fade" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <label for="alert1openclose" class="btn-close" aria-label="Close"></label>
</div>