Invisibility (Hiding Stuff)
You commonly see this technique (or not see, if you see what I mean 😄) being used to hide different configurations of navigation menus – such as hiding a menubar on small devices, and showing an offcanvas sidebar instead.
The “Hide below” classes hide stuff on viewport widths from zero to (max-width: variable - 1px). E.g. .hide-below-sm hides an element upto viewport width 767px (default). And from sm 768px and up, the element will be visible.
So, e.g. if you want to hide a sidebar on an iPad in portrait orientation but not on an iPad in landscape orientation, then you’ll want to use .hide-below-md.
✓ = visible; ✗ = invisible (hidden)
| Class | Example | ≤767px | 768px–1023px | 1024px–1280px | ≥1280px |
|---|---|---|---|---|---|
.hide-below-sm |
✗ | ✓ | ✓ | ✓ | |
.hide-below-md |
✗ | ✗ | ✓ | ✓ | |
.hide-below-lg |
✗ | ✗ | ✗ | ✓ | |
.hide-sm-up |
✓ | ✗ | ✗ | ✗ | |
.hide-md-up |
✓ | ✓ | ✗ | ✗ | |
.hide-lg-up |
✓ | ✓ | ✓ | ✗ |
The Special .hidden Class
There is also a special .hidden CSS class for hiding anything, whenever it is applied, by display: none !important;. This class is for adding and removing programatically by JavaScript.
You can’t see me!
Just for fun, I have demonstrated .hidden above this paragraph. But you won’t be able to see it unless you inspect this page’s source code.
<p class="hidden">
You can’t see me!
</p>