aboutsummaryrefslogtreecommitdiff
path: root/docs/utilities/visibility.md
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2017-03-07 20:44:42 -0800
committerMark Otto <[email protected]>2017-03-07 20:44:42 -0800
commit7e07d5bf2e5ed22d3997bacf8395ef6d0f0b99d1 (patch)
tree6e96a5b4e21aa1d49643b5a3abb960c767b4f63f /docs/utilities/visibility.md
parent07f63324d1f9447641d6d932872cea05aff5107f (diff)
parent95f37e4c402df37db16781995ffa1592032df9c8 (diff)
downloadbootstrap-7e07d5bf2e5ed22d3997bacf8395ef6d0f0b99d1.tar.xz
bootstrap-7e07d5bf2e5ed22d3997bacf8395ef6d0f0b99d1.zip
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev
Diffstat (limited to 'docs/utilities/visibility.md')
-rw-r--r--docs/utilities/visibility.md32
1 files changed, 32 insertions, 0 deletions
diff --git a/docs/utilities/visibility.md b/docs/utilities/visibility.md
new file mode 100644
index 000000000..5b7d28664
--- /dev/null
+++ b/docs/utilities/visibility.md
@@ -0,0 +1,32 @@
+---
+layout: docs
+title: Visibility
+group: utilities
+---
+
+Set the `visibility` of elements with our visibility utilities. These do not modify the `display` value at all and are helpful for hiding content from most users, but still keeping them for screen readers.
+
+Apply `.visible` or `.invisible` as needed.
+
+{% highlight html %}
+<div class="visible">...</div>
+<div class="invisible">...</div>
+{% endhighlight %}
+
+{% highlight scss %}
+// Class
+.visible {
+ visibility: visible;
+}
+.invisible {
+ visibility: hidden;
+}
+
+// Usage as a mixin
+.element {
+ @include invisible(visible);
+}
+.element {
+ @include invisible(hidden);
+}
+{% endhighlight %}