Source

Mostrar propiedad

Alterne de manera rápida y receptiva 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

Cambie el valor de la displaypropiedad con nuestras clases de utilidad de visualización receptiva. Admitimos deliberadamente solo un subconjunto de todos los valores posibles para display. Las clases se pueden combinar para varios efectos según lo necesite.

Notación

Las clases de utilidad de visualización que se aplican a todos los puntos de interrupción , de xsa xl, no tienen abreviatura de punto de interrupción en ellas. Esto se debe a que esas clases se aplican desde min-width: 0;y hacia arriba y, por lo tanto, no están vinculadas a una consulta de medios. Sin embargo, los puntos de interrupción restantes sí incluyen una abreviatura de punto de interrupción.

Como tal, las clases se nombran usando el formato:

  • .d-{value}porxs
  • .d-{breakpoint}-{value}para sm, md, lgy xl.

Donde el valor es uno de:

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

Las consultas de medios afectan los anchos de pantalla con el punto de interrupción dado o mayor . Por ejemplo, .d-lg-noneconjuntos display: none;en ambas pantallas lgy .xl

Ejemplos

d-en línea
d-en línea 
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
bloque d bloque d 
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

Ocultar elementos

Para un desarrollo optimizado para dispositivos móviles más rápido, use clases de visualización receptivas para mostrar y ocultar elementos por dispositivo. Evite crear versiones completamente diferentes del mismo sitio; en su lugar, oculte el elemento de manera receptiva para cada tamaño de pantalla.

Para ocultar elementos, simplemente use la .d-noneclase o una de las .d-{sm,md,lg,xl}-noneclases para cualquier variación de pantalla receptiva.

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

Tamaño de pantalla Clase
Oculto en todo .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
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
hide on screens wider than lg
ocultar en pantallas más pequeñas que lg 
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Mostrar en la impresión

Cambie el displayvalor de los elementos al imprimir con nuestras clases de utilidad de visualización de impresión. Incluye soporte para los mismos displayvalores que nuestras .d-*utilidades receptivas.

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

Las clases de impresión y visualización se pueden combinar.

Solo pantalla (Ocultar solo en impresión)
Print Only (Hide on screen only)
Ocultar hasta grande en la pantalla, pero mostrar siempre en la impresión 
<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>