Visibility
Visibility utilities hide elements visually while keeping or removing their space.
In this page:
Syntax
<div class="invisible">hidden but keeps space</div>
<span class="visually-hidden">screen reader text</span>Visibility
.visible and .invisible toggle visibility but keep the element's space. .visually-hidden hides content visually while leaving it available to screen readers, and .visually-hidden-focusable shows it when focused, perfect for skip links. d-none removes the element from layout entirely.
Note:
Use visually-hidden for labels that only screen readers need.
Example: Visibility
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<p>Before <span class="invisible">(invisible keeps space)</span> after</p>
<p>Before <span class="d-none">(d-none removes)</span> after</p>
<button class="btn btn-primary"><span class="visually-hidden">Add to cart</span>+</button>
<a class="visually-hidden-focusable" href="#main">Skip to content (visible when focused)</a>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Using d-none when screen readers need the text
- Confusing invisible with d-none
- Hiding focusable elements
Chapter Summary
- invisible keeps the space
- d-none removes the element
- visually-hidden stays available to screen readers
- visually-hidden-focusable for skip links
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: