Saltar al contenido principal Saltar a la navegación de la documentación

Propiedad display

Alterna de manera rápida y responsive el valor de visualización de los componentes y más con nuestras utilidades de visualización. Incluye soporte para algunos de los valores más comunes, así como algunos extras para controlar la visualización al imprimir.

Cómo funciona.

Cambiar el valor de display (propiedad) con nuestras clases de utilidad de visualización responsive. Admitimos deliberadamente solo un subconjunto de todos los valores posibles para display. Las clases se pueden combinar para obtener varios efectos según sea necesario.

Notación

Mostrar clases de utilidad que se aplican a todos los puntos de interrupción, desde xs a xxl, no tienen abreviaturas de punto de interrupción. Esto se debe a que esas clases se aplican desde min-width: 0; en adelante y, por lo tanto, no están vinculadas a una media query. Los puntos de interrupción restantes, sin embargo, incluyen una abreviatura de punto de interrupción.

Como tal, las clases se nombran usando el formato:

  • .d-{value} para xs
  • .d-{breakpoint}-{value} para sm, md, lg, xl y xxl.

Donde valor es uno de:

  • none
  • inline
  • inline-block
  • block
  • grid
  • inline-grid
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Los valores de visualización se pueden modificar cambiando los valores de display definidos en $utilities y recompilando el SCSS.

Las media queries afectan los anchos de pantalla con el punto de interrupción dado o mayor. Por ejemplo, .d-lg-none establece display: none; en pantallas lg, xl y xxl.

Ejemplos

d-inline
d-inline
html
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
d-block d-block
html
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Ocultar elementos

Para un desarrollo más rápido y compatible con dispositivos móviles, usa clases de visualización responsive para mostrar y ocultar elementos por dispositivo. Evita crear versiones completamente diferentes del mismo sitio; en su lugar, oculta elementos de manera responsive para cada tamaño de pantalla.

Para ocultar elementos simplemente usa la clase .d-none o una de las clases .d-{sm,md,lg,xl,xxl}-none para cualquier variación de pantalla responsive.

Para mostrar un elemento solo en un intervalo determinado de tamaños de pantalla, puedes combinar una clase .d-*-none con una clase clase .d-*-*, por ejemplo .d-none .d-md-block .d-xl-none .d-xxl-none ocultará el elemento para todos los tamaños de pantalla excepto en dispositivos medianos y grandes.

Tamaño de pantalla Clase
Oculto en todos .d-none
Oculto solo en xs .d-none .d-sm-block
Oculto solo en sm .d-sm-none .d-md-block
Oculto solo en md .d-md-none .d-lg-block
Oculto solo en lg .d-lg-none .d-xl-block
Oculto solo en xl .d-xl-none .d-xxl-block
Oculto solo en xxl .d-xxl-none
Visible en todos .d-block
Visible solo en xs .d-block .d-sm-none
Visible solo en sm .d-none .d-sm-block .d-md-none
Visible solo en md .d-none .d-md-block .d-lg-none
Visible solo en lg .d-none .d-lg-block .d-xl-none
Visible solo en xl .d-none .d-xl-block .d-xxl-none
Visible solo en xxl .d-none .d-xxl-block
ocultar en pantallas lg y más anchas
ocultar en pantallas más pequeñas que lg
html
<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Mostrar en forma impresa

Cambia el valor display de los elementos al imprimir con nuestras clases de utilidad de visualización de impresión. Incluye soporte para los mismos valores display que nuestras utilidades responsive .d-*.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-grid
  • .d-print-inline-grid
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Las clases print y display se pueden combinar.

Solo pantalla (Ocultar solo en impresión)
Solo imprimir (Ocultar solo en pantalla)
Ocultar en pantalla grande, pero mostrar siempre en impresión
html
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

CSS

API de utilidades de Sass

Las utilidades de visualización se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.

"display": (
  responsive: true,
  print: true,
  property: display,
  class: d,
  values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
),