What is CSS Visibility?
CSS visibility is a property that controls the visibility of an element on a webpage.
Set the visibility
of elements with our visibility utilities. These utility classes do not modify the display
value at all and do not affect layout – .invisible
elements still take up space in the page.
.invisible
class will be hidden both visually and for assistive technology/screen reader users.
Apply .visible
or .invisible
as needed.
...
...
Visibility utility classes that apply to all breakpoints, from sm
to
xl
, have no breakpoint abbreviation in them. This is because those classes are applied
from min-width: 0;
and up, and thus are not bound by a media query.
As such, the classes are named using the format:
.visible
for sm
to xl
.invisible
for sm
to xl
.visible-{breakpoint}
for sm
, md
, lg
,and
xl
..invisible-{breakpoint}
for sm
, md
, lg
,and
xl
.Change the viewport to see this in action
I am invisible on extra large screens
I am invisible on large screens
I am invisible on medium screens
I am invisible on small screens
Designed and built with ♥ by Rume Aluya.