Visibility helpers

Control what appears at each breakpoint with is-hidden, is-hidden-mobile, is-hidden-tablet-only, and related helpers—Bulma’s answer to Bootstrap’s d-none d-md-block display utilities.

Common patterns

• is-hidden-mobile — hide on touch/narrow viewports, show on larger
• is-hidden-desktop — hide on desktop, show on mobile/tablet
• is-hidden-tablet-only — hide only in the tablet band
• is-sr-only — screen-reader-only text (skip links, labels)

Accessibility note

Hiding the desktop nav with visibility helpers does not implement a mobile menu—pair hidden/shown regions with keyboard-accessible toggles when you add JS. Display helpers alone do not manage focus traps or ARIA expanded state.

Important interview questions and answers

1. Q: is-hidden vs is-invisible?
   A: is-hidden removes the element from layout (display: none); is-invisible hides visually but preserves space.
2. Q: Show content only on mobile?
   A: Use is-hidden-tablet or combine helpers so desktop rules hide what mobile shows—test each breakpoint in DevTools.

Self-check

1. Which helper hides an element but keeps its layout space?
2. Write classes to show a hint only on mobile viewports.