Display
The display helpers allow you to control the display of content. This includes being conditionally visible based upon the current viewport, or the actual element display type.
| Device | Code | Types | Range |
|---|---|---|---|
| phone_iphoneExtra small | xs | small to large handset | < 600px |
| tabletSmall | sm | small to medium tablet | 600px > < 960px |
| laptopMedium | md | large tablet to laptop | 960px > < 1264* |
| desktop_windowsLarge | lg | desktop | 1264 > < 1904px* |
| tvExtra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
Visibility
Conditionally display an element based upon the current viewport. These classes can be applied using the following format hidden-{breakpoint}-{condition}
The breakpoint sets the viewport size:
xs- extra small devicessm- small devicesmd- medium deviceslg- large devicesxl- extra large
The condition applies the class base on:
only- hide the element only onxsthroughxlbreakpointsand-down- hide the element on the specified breakpoint and downsmthroughlgbreakpointsand-up- hide the element on the specified breakpoint and upsmthroughlgbreakpoints
Additionally, media types can be targeted using the only condition. Both hidden-screen-only and hidden-print-only are currently supported.
Overflow
Set the overflow for an element with overflow-{axis}-hidden or simply overflow-hidden.
overflow-hidden- hide overflow on both the x and y axisoverflow-y-hidden- hide overflow on the y axisoverflow-x-hidden- hide overflow on the x axis
Display
Specify the elements display property. These classes can be applied using the following format d-{display}.
d-inline-flex- sets the element display property toinline-flexd-flex- sets the element display property toflexd-inline-block- sets the element display property toinline-blockd-block- sets the element display property toblockd-inline- sets the element display property toinlined-none- sets the element display property tonone
Exemplos
Resize your screen to see the elements conditionally hide.