Visibility

Control an element's visibility without changing the display property.

Page Contents

Overview

Set the visibility of an element, meaning its display is not modified and will not affect layout. .invisible elements still take up space in the page.

Elements with the .invisible class will be hidden both visually and for assistive technology/screen reader users.

Examples

Use .invisible and .visible as needed.

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

// Class
.invisible {
  visibility: hidden !important;
}
.visible {
  visibility: visible !important;
}

// Usage as a mixins
.element {
  @include invisible;
}
.element {
  @include visible;
}

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name	Type	Default	Description
`$enable-utility-visibility`	boolean	`true`	Enable the generation of the visibility utility classes.

Mixins

invisible()

Set an element to be invisible.

@include invisible();

visible()

Set an element to be visible.

@include visible();