Display utilities
Responsive utility classes which can be used to set the display
of elements.
Create amazing Typeform-like forms and pages just by writing Markdown!
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:
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:
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.
HTML
<!-- Hidden on print -->
<div class="d-print-none">
Screen only (hide on print only)
</div>
<!-- Displayed only on print -->
<div class="d-none d-print-block">
Print only (hide on screen only)
</div>
<!-- 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
</div>
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.