Alerts
Alerts can be used to provide feedback messages to users. Different types of alerts are available for different types of messages.
Commenting
|
New message!
Jane Doe just sent you a new message.
|
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:
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.
Alerts can be made to have a filled appearance by adding the appropriate classes to them.
<!-- 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>
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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</span>
</button>
<h4 class="alert-heading">Dismissible alert</h4>
This is a danger alert that can be dismissed.
</div>
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.
You are about to do something important.
You are about to do something important.
You are about to do something important.
You are about to do something important.
<!-- 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>
You are about to do something important.
You are about to do something important.
You are about to do something important.
You are about to do something important.
<!-- 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.
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.
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
The following people have generously decided to support Halfmoon.
Become a backer on Patreon .