Display
This helper 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>
Visible #
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>
Print #
This is how to hide or show something when printing.
<div class="hidden-print">...</div>
<div class="hidden visible-print">...</div>
Visually Hidden #
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>