bootstrap/site/content/docs/5.0/utilities/visibility.md

---
layout: docs
title: Visibility
description: Control the visibility of elements, without modifying their display, with visibility utilities.
group: utilities
---

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.

{{% callout warning %}}
Elements with the `.invisible` class will be hidden *both* visually and for assistive technology/screen reader users.
{{% /callout %}}

Apply `.visible` or `.invisible` as needed.

{{< highlight html >}}
<div class="visible">...</div>
<div class="invisible">...</div>
{{< /highlight >}}

{{< highlight scss >}}
// Class
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}
{{< /highlight >}}
-												move visibility docs and add .visible mention

											
										
										
											2017-03-05 13:03:05 -06:00
+								---
 								layout: docs
 								title: Visibility
-												Reword slightly awkward-sounding description

											
										
										
											2020-06-21 12:41:01 +01:00
+								description: Control the visibility of elements, without modifying their display, with visibility utilities.
-												move visibility docs and add .visible mention

											
										
										
											2017-03-05 13:03:05 -06:00
+								group: utilities
 								---
-												Emphasise/call out the note about `.invisible` and AT

											
										
										
											2020-06-21 12:39:49 +01:00
+								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.
-												Improve callout shortcode. (#31802)

Remove the `markdownify` call, and instead rely on Hugo's proper syntax; `{{% callout %}}` when we want to the content to be processed as Markdown.

This allows for stuff like:

{{% callout info %}}
##### I'm an info callout!

```css
.foo {
  color: #fff;
}
```

{{< example >}}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>
{{< /example >}}
{{% /callout %}}
											
										
										
											2020-10-12 09:06:06 +03:00
+								{{% callout warning %}}
-												Emphasise/call out the note about `.invisible` and AT

											
										
										
											2020-06-21 12:39:49 +01:00
+								Elements with the `.invisible` class will be hidden *both* visually and for assistive technology/screen reader users.
-												Improve callout shortcode. (#31802)

Remove the `markdownify` call, and instead rely on Hugo's proper syntax; `{{% callout %}}` when we want to the content to be processed as Markdown.

This allows for stuff like:

{{% callout info %}}
##### I'm an info callout!

```css
.foo {
  color: #fff;
}
```

{{< example >}}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>
{{< /example >}}
{{% /callout %}}
											
										
										
											2020-10-12 09:06:06 +03:00
+								{{% /callout %}}
-												move visibility docs and add .visible mention

											
										
										
											2017-03-05 13:03:05 -06:00
 								Apply `.visible` or `.invisible` as needed.
-												Switch to Hugo.

No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!

											
										
										
											2019-01-08 18:33:28 +02:00
+								{{< highlight html >}}
-												move visibility docs and add .visible mention

											
										
										
											2017-03-05 13:03:05 -06:00
+								<div class="visible">...</div>
 								<div class="invisible">...</div>
-												Switch to Hugo.

No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!

											
										
										
											2019-01-08 18:33:28 +02:00
+								{{< /highlight >}}
-												move visibility docs and add .visible mention

											
										
										
											2017-03-05 13:03:05 -06:00
-												Switch to Hugo.

No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!

											
										
										
											2019-01-08 18:33:28 +02:00
+								{{< highlight scss >}}
-												move visibility docs and add .visible mention

											
										
										
											2017-03-05 13:03:05 -06:00
+								// Class
 								.visible {
-												Deprecate `invisible()` mixin (#28066)


											
										
										
											2019-02-07 18:19:00 +01:00
+								  visibility: visible !important;
-												move visibility docs and add .visible mention

											
										
										
											2017-03-05 13:03:05 -06:00
+								}
 								.invisible {
-												Deprecate `invisible()` mixin (#28066)


											
										
										
											2019-02-07 18:19:00 +01:00
+								  visibility: hidden !important;
-												move visibility docs and add .visible mention

											
										
										
											2017-03-05 13:03:05 -06:00
+								}
-												Switch to Hugo.

No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!

											
										
										
											2019-01-08 18:33:28 +02:00
+								{{< /highlight >}}