Propiedad Display (Display property)

Cómo funciona

Cambia el valor de la propiedad display con nuestras clases de utilidad de visualización responsiva. Apoyamos intencionalmente solo un subconjunto de todos los valores posibles para display. Las clases se pueden combinar para varios efectos según lo necesites.

Notación

Las clases de utilidad de visualización que se aplican a todos los puntos de interrupción, desde xs hasta xxl, no tienen abreviatura de punto de interrupción. Esto se debido a que esas clases se aplican desde min-width: 0; en adelante y, por lo tanto, no están limitadas por 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 value 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 a los anchos de pantalla con el punto de interrupción dado o más grande. Por ejemplo, .d-lg-none establece display: none; en pantallas lg, xl y xxl.

Ejemplos

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

<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 (Hiding elements)

Para un desarrollo más rápido y adaptado a dispositivos móviles, utiliza clases de visualización responsiva para mostrar y ocultar elementos por dispositivo. Evita crear versiones completamente diferentes del mismo sitio, en su lugar oculta elementos de forma responsiva 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 responsiva.

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

<div class="d-lg-none">ocultar en pantallas lg y más anchas</div>
<div class="d-none d-lg-block">ocultar en pantallas más pequeñas que lg</div>

Display en impresión (Display in print)

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 de display que nuestras utilidades responsivas .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 de impresión y visualización se pueden combinar.

<div class="d-print-none">Solo pantalla (Ocultar solo al imprimir)</div>
<div class="d-none d-print-block">Solo impresión (Ocultar solo en pantalla)</div>
<div class="d-none d-lg-block d-print-block">Ocultar hasta lg en pantalla, pero mostrar siempre al imprimir</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
),