Display

This module helps to hide or show elements on different screen sizes or when printing.

Hidden #

This class hides the element by setting the property display: none.


<div class="hidden">...</div>

These classes help to hide the element on different screen sizes.


<div class="hidden-lg">...</div>
<div class="hidden-md">...</div>
<div class="hidden-sm">...</div>

This class shows the element by setting the property display: block.


<div class="visible">...</div>

These classes help to show the element on different screen sizes.


<div class="hidden visible-lg">...</div>
<div class="hidden visible-md">...</div>
<div class="hidden visible-sm">...</div>

This is how to hide or show something when printing.


<div class="hidden-print">...</div>
<div class="hidden visible-print">...</div>

This class visually hides the element but keep them accessible to assistive technologies (such as screen readers).


<div class="visually-hidden">Text for screen readers</div>