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.
Prefix | Description |
---|---|
xs- | below 40em |
sm- | 40em – 52em |
md- | 52em – 64em |
lg- | above 64em |
Hide content
Resize the browser window to see the effect.
Hidden below 40emHidden between 40 and 52emHidden between 52 and 64emHidden above 64em
Responsive Line Break
Control wrapping at different screen widths.
Responsive Line Break To Control Wrapping
Accessible Hide
To visually hide things like form labels in an accessible way, use the .hide
utility.
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.
VisibleHidden