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

---
layout: docs
title: Visibility
description: Control the visibility, without modifying the display, of elements 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. Content will be hidden both visually and for assistive technology/screen reader users.

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 19:03:05 +00:00
+								---
 								layout: docs
 								title: Visibility
-												new toc in utils and about and extend

											
										
										
											2017-05-28 18:25:59 +00:00
+								description: Control the visibility, without modifying the display, of elements with visibility utilities.
-												move visibility docs and add .visible mention

											
										
										
											2017-03-05 19:03:05 +00:00
+								group: utilities
 								---
-												Fix incorrect visibility utility description regarding screen readers (#26786)


											
										
										
											2018-07-02 18:52:28 +00: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. Content will be hidden both visually and for assistive technology/screen reader users.
-												move visibility docs and add .visible mention

											
										
										
											2017-03-05 19:03:05 +00: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 16:33:28 +00:00
+								{{< highlight html >}}
-												move visibility docs and add .visible mention

											
										
										
											2017-03-05 19:03:05 +00: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 16:33:28 +00:00
+								{{< /highlight >}}
-												move visibility docs and add .visible mention

											
										
										
											2017-03-05 19:03:05 +00: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 16:33:28 +00:00
+								{{< highlight scss >}}
-												move visibility docs and add .visible mention

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


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

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


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

											
										
										
											2017-03-05 19:03:05 +00: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 16:33:28 +00:00
+								{{< /highlight >}}