Use these utilities to conditionally hide elements based on viewport width.

Prefix Naming Convention

Hide utilities differ from other breakpoint-based styles in Basscss. Each hide utility only applies to one breakpoint range.

Hide content

Resize the browser window to see the effect.

``html


Hidden below 40em

Hidden between 40 and 52em

Hidden between 52 and 64em

Hidden above 64em

`

Responsive Line Break

Control wrapping at different screen widths.

`html



Responsive Line Break


To Control Wrapping



`

Accessible Hide

To visually hide things like form labels in an accessible way, use the .hide utility.

`html



Search




`

Display None

Set display none with this utility. Use this with caution as it might cause accessibility issues depending on where it’s used.

`html


Hidden

``