Propiedad display

¿Cómo funciona la propiedad display?

Cambia el valor de la propiedad display 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 varios efectos según lo necesites.

Notación

Muestra las clases de utilidad que se aplican a todos los breakpoints, desde xs hasta xxl, sin abreviatura de breakpoint. 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. Sin embargo, los breakpoints restantes sí incluyen una abreviatura de breakpoint.

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
• table
• table-cell
• table-row
• flex
• inline-flex

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

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

Ejemplos

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

<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, 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 los elementos de forma que respondan a 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 dado 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 .d-xxl-none ocultará el elemento para todos los tamaños de pantalla excepto en dispositivos medianos y grandes.

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

Display al imprimir

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

Sass

API de utilidades

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

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