Display Helpers
Los helpers de display controlan como participa un elemento en el layout y cuando se ve en cada breakpoint. Esta pagina concentra patrones de visibilidad como d-md-none para que Flexbox se mantenga enfocado en ejes, alineacion y sizing de items.
Uso
Elige un display base, agrega opcionalmente un override responsive y copia la lista de clases resultante.
Sintaxis de clases
Los helpers de display se componen como d-{valor} para comportamiento base y d-{breakpoint}-{valor} para overrides responsivos.
Clases base
Usa d-block, d-inline, d-inline-block, d-flex, d-inline-flex o d-none.
Overrides por breakpoint
Prefija con sm, md, lg o xl para sobreescribir display desde ese breakpoint en adelante.
Cascada mobile-first
Breakpoints posteriores sobreescriben declaraciones de display previas en orden ascendente.
Ejemplos de implementacion
Patrones como d-none d-md-block o d-block d-md-none expresan transiciones de visibilidad sin media queries custom.
Navegacion solo desktop
Oculta un bloque de navegacion en pantallas pequenas y muestralo desde md hacia arriba.
Accion solo mobile
Muestra una accion compacta por debajo de md y ocultala en breakpoints mayores.
Badge inline promovido a bloque
Mantiene ritmo inline en pantallas pequenas y promueve a bloque en xl.
Referencia de breakpoints
Usa esta tabla como mapa canónico de breakpoints al componer clases responsive de display.
| Dispositivo | Token | Dispositivos tipicos | Rango |
|---|---|---|---|
| Extra small | xs | Telefono pequeno a grande | < 600px |
| Small | sm | Tablet pequena a mediana | 600px > < 840px |
| Medium | md | Tablet grande a laptop | 840px > < 1145px |
| Large | lg | Laptop a desktop | 1145px > < 1545px |
| Extra large | xl | Desktop 1080p a 1440p | 1545px > |
Notas del framework
Estas notas aclaran como interactuan los helpers de display con otras paginas de utilidades.
- Display Helpers concentra preocupaciones de visibilidad y breakpoints dentro de utilidades.
- La documentacion de Flexbox se enfoca en direccion, alineacion, wrapping y sizing por item.
- Combina helpers de display y flex cuando el layout necesite reglas de visibilidad y control de ejes, por ejemplo
d-none d-md-flex items-center.