Display utilities

Responsive utility classes which can be used to set the display of elements.

Notation #

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

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

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on 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 display: none property
inline Sets display: inline property
inline-block Sets display: inline-block property
block Sets display: block property
grid Sets display: grid property
inline-grid Sets display: inline-grid property
table Sets display: table property
table-cell Sets display: table-cell property
table-row Sets display: table-row property
flex Sets display: flex property
inline-flex Sets display: inline-flex property

Hiding elements #

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

Screen size Class
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 and .d-xxl-block
Hidden only on xxl .d-xxl-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 and .d-xxl-none
Visible only on xxl .d-none and .d-xxl-block

Display in print #

The display property can also be changed when printing using the print display utility classes. These class names come in the .d-print-{value} format. The {value} can be anything from the first table on this page. You can see a few of these classes in action in the example below.

Screen only (hide on print only)
Print only (hide on screen only)
Hide up to large on screen, but always show on print
<!-- Hidden on print -->
<div class="d-print-none">
  Screen only (hide on print only)

<!-- Displayed only on print -->
<div class="d-none d-print-block">
  Print only (hide on screen only)

<!-- Displayed always on print, hidden up to large on screen -->
<div class="d-none d-lg-block d-print-block">
  Hide up to large on screen, but always show on print
Up next
Flex utilities

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.