Propiedad de visualización

Cambie de forma rápida y sensible 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 display propiedad 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 sea necesario.

Notación

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

Como tal, las clases se nombran usando el formato:

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

Donde valor es uno de:

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

Los valores de visualización se pueden modificar cambiando la $displays variable y volviendo a compilar el SCSS.

Las consultas de medios afectan los anchos de pantalla con el punto de interrupción dado o más . Por ejemplo, se .d-lg-none establece display: none; en las pantallas lg y xl .

Ejemplos

d-inline

<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 elementos de manera receptiva para cada tamaño de pantalla.

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

Para mostrar un elemento solo en un intervalo dado de tamaños de pantalla, puede combinar una .d-*-none clase 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`

esconderse en lg y pantallas más anchas

esconderse en pantallas más pequeñas que lg

<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 impresión

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

.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)

Imprimir solo (Ocultar solo en pantalla)

Hide up to large on screen, but always show on print

<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>

Gap

Se puede utilizar las utilidades gap en el contenedor de d-flex Esto puede evitar tener que agregar utilidades de margen a elementos de cuadrícula individuales (hijos de un contenedor display: flex). Las utilidades Gap responden de forma predeterminada y se generan a través de nuestra API de utilidades, según el mapa Sass $spacers.

Elemento de cuadrícula 1

Elemento de cuadrícula 2

Elemento de cuadrícula 3

<div class="d-flex gap-3">
  <div class="p-2 bg-light border">Elemento de cuadrícula 1</div>
  <div class="p-2 bg-light border">Elemento de cuadrícula 2</div>
  <div class="p-2 bg-light border">Elemento de cuadrícula 3</div>
</div>

El soporte incluye opciones responsive para todos los puntos de interrupción de la cuadrícula de Bootstrap, así como seis tamaños del mapa $spacers (0–5). No hay clase de utilidad .gap-auto ya que es efectivamente lo mismo que .gap-0.