Display

Bamboo provides style properties for styling display of an element

Bamboo provides utilities and style properties for styling display of an element.

Display Property

<div className={css({ display: 'flex' })} />

Hiding Elements

Hide an element from a breakpoint up by setting display under that breakpoint, and below one by setting it under the breakpoint's Down range. See Responsive design for the full set of ranges.

// hidden from md up
<div className={css({ display: 'flex', md: { display: 'none' } })} />
 
// hidden below md
<div className={css({ display: 'flex', mdDown: { display: 'none' } })} />

A width the breakpoints do not name is an arbitrary at-rule:

<div className={css({ '@media (width < 800px)': { display: 'none' } })} />

hideFrom and hideBelow utilities used to spell the first two of these. They were removed: they said nothing the conditions did not, and the two spellings had already disagreed once at a boundary — hideBelow resolved to an inclusive max-width for a raw value and to an exclusive range for a breakpoint token, so hideBelow="800px" and an 800px breakpoint behaved differently at exactly 800px.