Problem Statement
Compare .d-none, .invisible, and .visually-hidden. When do you use each?
Explanation
Dot d dash none removes the element from layout and from screen readers. Use it when the content should not exist for anyone at that breakpoint.
Dot invisible hides it visually but it still occupies space. Use it for simple show and hide animations or measuring layout. Dot visually dash hidden hides it from sighted users but keeps it for assistive tech. Use it for accessible labels that should not be seen.
Code Solution
SolutionRead Only
<span class='visually-hidden'>Skip to main content</span>
