Ver en GitHub

Propiedad display

Alterna rápida y responsivamente el valor display de componentes y más con nuestras utilidades de display. Incluye soporte para algunos de los valores más comunes, así como algunas extras para controlar display al imprimir.

On this page

Cómo funciona

Cambia el valor de la propiedad display con nuestras clases utilitarias responsivas de display. Admitimos 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 utilitarias de display que se aplican a todos los breakpoints, desde xs hasta xxl, no tienen abreviatura de breakpoint en ellas. Esto se debe a que esas clases se aplican desde min-width: 0; hacia arriba, y por lo tanto no están limitadas por una media query. Los breakpoints restantes, sin embargo, sí incluyen una abreviatura de breakpoint.

Por lo tanto, 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 display se pueden modificar cambiando la variable $displays y recompilando el SCSS.

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

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>

d-block d-block

<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 más rápido adaptado a móviles, usa clases de display responsivas para mostrar y ocultar elementos por dispositivo. Evita crear versiones completamente diferentes del mismo sitio; en su lugar, oculta elementos responsivamente 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 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.

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 lg y pantallas más anchas

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

Display al imprimir

Cambia el valor display de los elementos al imprimir con nuestras clases utilitarias de display para 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-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

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

Solo pantalla (ocultar solo al imprimir)

Solo impresión (ocultar solo en pantalla)

Ocultar hasta large en pantalla, pero siempre mostrar al imprimir

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

Sass

Utilities API

Las utilidades de display se declaran en nuestra utilities API en scss/_utilities.scss. Aprende a usar la utilities API.

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