Display
Los auxiliares de display te ayudan a controlar cómo muestras tu contenido. Esto incluye mostrarlos condicionalmente basados en el área visible actual (viewport) o el tipo de elemento actual que se debe presentar.
| 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 | |||
Visibilidad
Mostrar condicionalmente un elemento basado en el viewport actual. Estas clases pueden ser aplicadas usando el siguiente formato: hidden-{breakpoint}-{condición}
El breakpoint indica el tamaño del viewport:
xs- dispositivos extra pequeñossm- dispositivos pequeñosmd- medianoslg- grandesxl- extra grandes
La condición aplica la clase basada en:
only- esconde el elemento sólamente de los breakpoints específicos (xshastaxl)and-down- esconde el elemento en el breakpoint específico y hacia abajo (smhastalg)and-up- esconde el elemento en el breakpoint específico y hacia arriba (smhastalg)
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
Especifica la propiedad display de los elementos. Estas clases pueden ser aplicadas utilizando el siguiente formato: d-{display}.
d-inline-flex- la propiedad display queda definida comoinline-flexd-flex- la propiedad display queda definida comoflexd-inline-block- la propiedad display queda definida comoinline-blockd-block- la propiedad display queda definida comoblockd-inline- la propiedad display queda definida comoinlined-none- la propiedad display queda definida comonone
Ejemplos
Resize your screen to see the elements conditionally hide.