Alerts

Alerts can be used to provide feedback messages to users. Different types of alerts are available for different types of messages.

<div class="alert" role="alert">
  <h4 class="alert-heading">Default alert</h4>
  This is a default alert with some content and <a href="#" class="alert-link">a link</a>.
</div>
<div class="alert alert-primary" role="alert">
  <h4 class="alert-heading">Primary alert</h4>
  This is a primary alert with some content and <a href="#" class="alert-link">a link</a>.
</div>
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Success alert</h4>
  This is a success alert with some content and <a href="#" class="alert-link">a link</a>.
</div>
<div class="alert alert-secondary" role="alert">
  <h4 class="alert-heading">Secondary alert</h4>
  This is a secondary alert with some content and <a href="#" class="alert-link">a link</a>.
</div>
<div class="alert alert-danger" role="alert">
  <h4 class="alert-heading">Danger alert</h4>
  This is a danger alert with some content and <a href="#" class="alert-link">a link</a>.
</div>

The .alert-heading class can be used to create typographical hierarchies within the alerts, and the .alert-link class makes the links readable.

Please also note that contextual alerts can be styled using the following CSS selectors:

  • .alert.alert-* {...} for light mode.
  • .dark-mode .alert.alert-* {...} for dark mode.

This means that something like .alert-primary {...}/.dark-mode .alert-primary {...} is not enough. This is because of how alert styles are structured in Halfmoon.

Filled alerts #

Alerts can be made to have a filled appearance by adding the appropriate classes to them.

  • Alerts with the class .filled-lm will be filled in light mode.
  • Alerts with the class .filled-dm will be filled in dark mode.
  • Alerts with the class .filled will always be filled.
<!-- Default alert (unchanged, so class is redundant) -->
<div class="alert filled-lm" role="alert">
  <h4 class="alert-heading">Default alert</h4>
  This is a default alert with the class <span class="code">.filled-lm</span>. Its appearance will be unchanged as there is nothing to fill.
</div>

<!-- Filled in light mode -->
<div class="alert alert-primary filled-lm" role="alert">
  <h4 class="alert-heading">Filled in light mode</h4>	
  This is a primary alert that will be filled in light mode.
</div>
<div class="alert alert-success filled-lm" role="alert">
  <h4 class="alert-heading">Filled in light mode</h4>
  This is a success alert that will be filled in light mode.
</div>
<div class="alert alert-secondary filled-lm" role="alert">
  <h4 class="alert-heading">Filled in light mode</h4>
  This is a secondary alert that will be filled in light mode.
</div>
<div class="alert alert-danger filled-lm" role="alert">
  <h4 class="alert-heading">Filled in light mode</h4>
  This is a danger alert that will be filled in light mode.
</div>
<!-- Default alert (unchanged, so class is redundant) -->
<div class="alert filled-dm" role="alert">
  <h4 class="alert-heading">Default alert</h4>
  This is a default alert with the class <span class="code">.filled-dm</span>. Its appearance will be unchanged as there is nothing to fill.
</div>

<!-- Filled in dark mode -->
<div class="alert alert-primary filled-dm" role="alert">
  <h4 class="alert-heading">Filled in dark mode</h4>	
  This is a primary alert that will be filled in dark mode.
</div>
<div class="alert alert-success filled-dm" role="alert">
  <h4 class="alert-heading">Filled in dark mode</h4>
  This is a success alert that will be filled in dark mode.
</div>
<div class="alert alert-secondary filled-dm" role="alert">
  <h4 class="alert-heading">Filled in dark mode</h4>
  This is a secondary alert that will be filled in dark mode.
</div>
<div class="alert alert-danger filled-dm" role="alert">
  <h4 class="alert-heading">Filled in dark mode</h4>
  This is a danger alert that will be filled in dark mode.
</div>
<!-- Default alert (unchanged, so class is redundant) -->
<div class="alert filled" role="alert">
  <h4 class="alert-heading">Default alert</h4>
  This is a default alert with the class <span class="code">.filled</span>. Its appearance will be unchanged as there is nothing to fill.
</div>

<!-- Always filled -->
<div class="alert alert-primary filled" role="alert">
  <h4 class="alert-heading">Always filled</h4>
  This is a primary alert that will always be filled.
</div>
<div class="alert alert-success filled" role="alert">
  <h4 class="alert-heading">Always filled</h4>
  This is a success alert that will always be filled.
</div>
<div class="alert alert-secondary filled" role="alert">
  <h4 class="alert-heading">Always filled</h4>
  This is a secondary alert that will always be filled.
</div>
<div class="alert alert-danger filled" role="alert">
  <h4 class="alert-heading">Always filled</h4>
  This is a danger alert that will always be filled.
</div>

Dismissible alerts # (Requires JavaScript)

Alerts can be made dismissible by adding an element with the attribute data-dismiss="alert" inside it. Here for example, the button with the class .close will dismiss the alert. All the button does is that it adds the class .dispose to the alert when clicked.

<!-- Dismissible alerts -->
<div class="alert" role="alert">
  <button class="close" data-dismiss="alert" type="button" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="alert-heading">Dismissible alert</h4>
  This is a default alert that can be dismissed.
</div>
<div class="alert alert-primary" role="alert">
  <button class="close" data-dismiss="alert" type="button" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="alert-heading">Dismissible alert</h4>
  This is a primary alert that can be dismissed.
</div>
<div class="alert alert-success" role="alert">
  <button class="close" data-dismiss="alert" type="button" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="alert-heading">Dismissible alert</h4>
  This is a success alert that can be dismissed.
</div>
<div class="alert alert-secondary" role="alert">
  <button class="close" data-dismiss="alert" type="button" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="alert-heading">Dismissible alert</h4>
  This is a secondary alert that can be dismissed.
</div>
<div class="alert alert-danger" role="alert">
  <button class="close" data-dismiss="alert" type="button" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="alert-heading">Dismissible alert</h4>
  This is a danger alert that can be dismissed.
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

If you don't want to inlcude the JavaScript file, the functionality can be implemented rather easily, because simply adding the class .dispose to alerts dismisses them. Given below is an example of one such implementation.

<!-- Dismissible alerts without JS file -->
<div class="alert" role="alert">
  <button class="close" onclick="this.parentNode.classList.add('dispose')" type="button" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="alert-heading">Dismissible alert</h4>
  This is a default alert that can be dismissed.
</div>
<div class="alert alert-primary" role="alert">
  <button class="close" onclick="this.parentNode.classList.add('dispose')" type="button" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="alert-heading">Dismissible alert</h4>
  This is a primary alert that can be dismissed.
</div>
<div class="alert alert-success" role="alert">
  <button class="close" onclick="this.parentNode.classList.add('dispose')" type="button" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="alert-heading">Dismissible alert</h4>
  This is a success alert that can be dismissed.
</div>
<div class="alert alert-secondary" role="alert">
  <button class="close" onclick="this.parentNode.classList.add('dispose')" type="button" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="alert-heading">Dismissible alert</h4>
  This is a secondary alert that can be dismissed.
</div>
<div class="alert alert-danger" role="alert">
  <button class="close" onclick="this.parentNode.classList.add('dispose')" type="button" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="alert-heading">Dismissible alert</h4>
  This is a danger alert that can be dismissed.
</div>

Alternate buttons and inputs (dark mode only) #

When default buttons and inputs are placed inside contextual alerts, the .alt-dm class should be added to them. Given below are two sets of alerts - one of them is filled in dark mode, one of them is not. The alerts in both sets have default buttons and inputs with the class .alt-dm in them, which makes them readable and usable on the colorful backgrounds.

<!-- Primary alert -->
<div class="alert alert-primary" role="alert">
  <h4 class="alert-heading mt-10">Heads up!</h4> <!-- mt-10 = margin-top: 1rem (10px) -->
  <p>You are about to do something important.</p>
  <div class="mb-10"> <!-- mb-10 = margin-bottom: 1rem (10px) -->
    <input type="text" class="form-control alt-dm" value="john@example.com">
  </div>
  <div class="mb-10 text-right"> <!-- mb-10 = margin-bottom: 1rem (10px), text-right = text-align: right -->
    <button class="btn alt-dm">Let's do it!</button>
  </div>
</div>

<!-- Success alert -->
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading mt-10">Heads up!</h4> <!-- mt-10 = margin-top: 1rem (10px) -->
  <p>You are about to do something important.</p>
  <div class="mb-10"> <!-- mb-10 = margin-bottom: 1rem (10px) -->
    <input type="text" class="form-control alt-dm" value="john@example.com">
  </div>
  <div class="mb-10 text-right"> <!-- mb-10 = margin-bottom: 1rem (10px), text-right = text-align: right -->
    <button class="btn alt-dm">Let's do it!</button>
  </div>
</div>

<!-- Secondary alert -->
<div class="alert alert-secondary" role="alert">
  <h4 class="alert-heading mt-10">Heads up!</h4> <!-- mt-10 = margin-top: 1rem (10px) -->
  <p>You are about to do something important.</p>
  <div class="mb-10"> <!-- mb-10 = margin-bottom: 1rem (10px) -->
    <input type="text" class="form-control alt-dm" value="john@example.com">
  </div>
  <div class="mb-10 text-right"> <!-- mb-10 = margin-bottom: 1rem (10px), text-right = text-align: right -->
    <button class="btn alt-dm">Let's do it!</button>
  </div>
</div>

<!-- Danger alert -->
<div class="alert alert-danger" role="alert">
  <h4 class="alert-heading mt-10">Heads up!</h4> <!-- mt-10 = margin-top: 1rem (10px) -->
  <p>You are about to do something important.</p>
  <div class="mb-10"> <!-- mb-10 = margin-bottom: 1rem (10px) -->
    <input type="text" class="form-control alt-dm" value="john@example.com">
  </div>
  <div class="mb-10 text-right"> <!-- mb-10 = margin-bottom: 1rem (10px), text-right = text-align: right -->
    <button class="btn alt-dm">Let's do it!</button>
  </div>
</div>
<!-- Primary alert -->
<div class="alert alert-primary filled-dm" role="alert">
  <h4 class="alert-heading mt-10">Heads up!</h4> <!-- mt-10 = margin-top: 1rem (10px) -->
  <p>You are about to do something important.</p>
  <div class="mb-10"> <!-- mb-10 = margin-bottom: 1rem (10px) -->
    <input type="text" class="form-control alt-dm" value="john@example.com">
  </div>
  <div class="mb-10 text-right"> <!-- mb-10 = margin-bottom: 1rem (10px), text-right = text-align: right -->
    <button class="btn alt-dm">Let's do it!</button>
  </div>
</div>

<!-- Success alert -->
<div class="alert alert-success filled-dm" role="alert">
  <h4 class="alert-heading mt-10">Heads up!</h4> <!-- mt-10 = margin-top: 1rem (10px) -->
  <p>You are about to do something important.</p>
  <div class="mb-10"> <!-- mb-10 = margin-bottom: 1rem (10px) -->
    <input type="text" class="form-control alt-dm" value="john@example.com">
  </div>
  <div class="mb-10 text-right"> <!-- mb-10 = margin-bottom: 1rem (10px), text-right = text-align: right -->
    <button class="btn alt-dm">Let's do it!</button>
  </div>
</div>

<!-- Secondary alert -->
<div class="alert alert-secondary filled-dm" role="alert">
  <h4 class="alert-heading mt-10">Heads up!</h4> <!-- mt-10 = margin-top: 1rem (10px) -->
  <p>You are about to do something important.</p>
  <div class="mb-10"> <!-- mb-10 = margin-bottom: 1rem (10px) -->
    <input type="text" class="form-control alt-dm" value="john@example.com">
  </div>
  <div class="mb-10 text-right"> <!-- mb-10 = margin-bottom: 1rem (10px), text-right = text-align: right -->
    <button class="btn alt-dm">Let's do it!</button>
  </div>
</div>

<!-- Danger alert -->
<div class="alert alert-danger filled-dm" role="alert">
  <h4 class="alert-heading mt-10">Heads up!</h4> <!-- mt-10 = margin-top: 1rem (10px) -->
  <p>You are about to do something important.</p>
  <div class="mb-10"> <!-- mb-10 = margin-bottom: 1rem (10px) -->
    <input type="text" class="form-control alt-dm" value="john@example.com">
  </div>
  <div class="mb-10 text-right"> <!-- mb-10 = margin-bottom: 1rem (10px), text-right = text-align: right -->
    <button class="btn alt-dm">Let's do it!</button>
  </div>
</div>

The buttons and inputs will be unchanged in light mode as elements with white backrounds look good on almost all background colors.

Mixing utilities #

Alerts are very versatile elements, and they can be used together with utility classes to make notification boxes for almost all situations. Given below is a complete example.

<div class="alert alert-secondary filled-dm w-400 mw-full" role="alert"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
  <div class="row align-items-center"> <!-- align-items-center = align-items: center -->
    <div class="col-sm-2">
      <div class="w-50 h-50 d-flex align-items-center rounded-circle bg-secondary hidden-dm"> <!-- w-50 = width: 5rem (50px), h-50 = height: 5rem (50px), d-flex = display: flex, align-items-center = align-items: center, rounded-circle = border-radius: 50%, bg-secondary = background-color: var(--secondary-color), hidden-dm = hidden in dark mode -->
        <div class="m-auto"> <!-- m-auto = margin: auto -->
          <i class="fa fa-lightbulb-o fa-2x" aria-hidden="true"></i>
          <span class="sr-only">Lightbulb</span> <!-- sr-only = only for screen readers -->
        </div>
      </div>
      <div class="w-50 h-50 d-flex align-items-center rounded-circle bg-white hidden-lm"> <!-- w-50 = width: 5rem (50px), h-50 = height: 5rem (50px), d-flex = display: flex, align-items-center = align-items: center, rounded-circle = border-radius: 50%, bg-white = background-color: var(--white-bg-color), hidden-lm = hidden in light mode -->
        <div class="m-auto"> <!-- m-auto = margin: auto -->
          <i class="fa fa-lightbulb-o fa-2x" aria-hidden="true"></i>
          <span class="sr-only">Lightbulb</span> <!-- sr-only = only for screen readers -->
        </div>
      </div>
    </div>
    <div class="col-sm-9 offset-sm-1 py-10"> <!-- py-10 = padding-top: 1rem (10px) and padding-bottom: 1rem (10px) -->
      <h4 class="alert-heading">Here's a tip for you</h4>
      Utility classes can be used with alerts to create useful notification boxes that look good in both light and dark mode.
    </div>
  </div>
</div>

The icon being used is part of the Font Awesome 4.7.0 iconset. Please take note of the .hidden-dm (hides the element in dark mode) and the .hidden-lm (hides the element in light mode) utility classes. They can be very useful when used correctly.


Up next: Badges