Display utilities

Halfmoon comes with responsive utility classes which can be used to set the display property of elements.

Notation #

The class names for the display utilities come in the the following formats:

  • .d-{value}
  • .d-{breakpoint}-{value}

The {breakpoint} can be sm, md, lg, or xl. If the breakpoint is not provided, the element will be affected on all screen sizes (including extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

The {value} can be one of the following:

{value} Description
none Sets the display: none property
inline Sets the display: inline property
inline-block Sets the display: inline-block property
block Sets the display: block property
table Sets the display: table property
table-row Sets the display: table-row property
table-cell Sets the display: table-cell property
flex Sets the display: flex property
inline-flex Sets the display: inline-flex property

Hiding elements #

The responsive display utility classes can be used to show and hide elements by device. This way, sites can be easily made responsive and work well on all screen sizes. The following table shows all the scenarios for hiding/showing elements for certain breakpoints:

Scenarios Classes
Hidden on all .d-none
Hidden only on xs .d-none and .d-sm-block
Hidden only on sm .d-sm-none and .d-md-block
Hidden only on md .d-md-none and .d-lg-block
Hidden only on lg .d-lg-none and .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block and .d-sm-none
Visible only on sm .d-none and .d-sm-block and .d-md-none
Visible only on md .d-none and .d-md-block and .d-lg-none
Visible only on lg .d-none and .d-lg-block and .d-xl-none
Visible only on xl .d-none and .d-xl-block

Hidden for breakpoint up and down #

In the last section, we saw how elements can be hidden/shown only on certain screen sizes. However, often times it is more useful to simply hide elements (set the display: none property) for a certain breakpoint and up, or for a certain breakpoint and down. This can be done using the following classes:

  • .hidden-{breakpoint}-and-up
  • .hidden-{breakpoint}-and-down

So for example, the class .hidden-sm-and-down would hide the element on small screens and down (ie, where width <= 768px), while the class .hidden-md-and-up would hide the element on medium screens and up (ie, where width > 768px).

This method is generally a little bit easier to reason with in some cases, as you don't have to worry about setting the display property explicitly.

Hidden in light or dark mode #

Elements can also be hidden (display: none) in light mode or dark mode using the following classes:

  • .hidden-lm hides the element in light mode only.
  • .hidden-dm hides the element in dark mode only.

You can see these classes in action in the example below. Try alternating between light mode and dark mode to see the results.

Light mode is on

Dark mode is on

<div class="content">
  <h3 class="content-title hidden-dm">Light mode is on</h3> <!-- hidden-dm = display: none (only in dark mode) -->
  <h3 class="content-title hidden-lm">Dark mode is on</h3> <!-- hidden-lm = display: none (only in light mode) -->