Source

Propriedade de exibição

Alterne de forma rápida e responsiva o valor de exibição dos componentes e muito mais com nossos utilitários de exibição. Inclui suporte para alguns dos valores mais comuns, bem como alguns extras para controlar a exibição durante a impressão.

Como funciona

Altere o valor da displaypropriedade com nossas classes de utilitário de exibição responsivo. Propositadamente suportamos apenas um subconjunto de todos os valores possíveis para display. As classes podem ser combinadas para vários efeitos, conforme necessário.

Notação

As classes de utilitário de exibição que se aplicam a todos os pontos de interrupção , de xsa xl, não possuem abreviação de ponto de interrupção. Isso ocorre porque essas classes são aplicadas de min-width: 0;e para cima e, portanto, não são vinculadas a uma consulta de mídia. Os pontos de interrupção restantes, no entanto, incluem uma abreviação de ponto de interrupção.

Como tal, as classes são nomeadas usando o formato:

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

Onde valor é um dos seguintes:

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

Os valores de exibição podem ser alterados alterando a $displaysvariável e recompilando o SCSS.

As consultas de mídia afetam as larguras de tela com o ponto de interrupção fornecido ou maior . Por exemplo, .d-lg-nonedefine display: none;em ambas as telas lge .xl

Exemplos

d-inline
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-bloco d-bloco 
<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 um desenvolvimento mais rápido e otimizado para dispositivos móveis, use classes de exibição responsivas para mostrar e ocultar elementos por dispositivo. Evite criar versões totalmente diferentes do mesmo site, em vez disso, oculte elementos de forma responsiva para cada tamanho de tela.

Para ocultar elementos, basta usar a .d-noneclasse ou uma das .d-{sm,md,lg,xl}-noneclasses para qualquer variação de tela responsiva.

Para mostrar um elemento apenas em um determinado intervalo de tamanhos de tela, você pode combinar uma .d-*-noneclasse com uma .d-*-*classe, por exemplo .d-none .d-md-block .d-xl-none, ocultará o elemento para todos os tamanhos de tela, exceto em dispositivos médios e grandes.

Tamanho da tela Classe
Escondido em todos .d-none
Oculto apenas em xs .d-none .d-sm-block
Escondido apenas em sm .d-sm-none .d-md-block
Escondido apenas em md .d-md-none .d-lg-block
Escondido apenas na lg .d-lg-none .d-xl-block
Escondido apenas em xl .d-xl-none
Visível em todos .d-block
Visível apenas em xs .d-block .d-sm-none
Visível apenas em sm .d-none .d-sm-block .d-md-none
Visível apenas em md .d-none .d-md-block .d-lg-none
Visível apenas em lg .d-none .d-lg-block .d-xl-none
Visível apenas em xl .d-none .d-xl-block
esconder em telas maiores que lg
esconder em telas menores 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>

Exibir na impressão

Altere o displayvalor dos elementos ao imprimir com nossas classes de utilitário de exibição de impressão. Inclui suporte para os mesmos displayvalores que nossos .d-*utilitários responsivos.

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

As classes de impressão e exibição podem ser combinadas.

Somente tela (ocultar somente na impressão)
Print Only (Hide on screen only)
Ocultar até grande na tela, mas sempre mostrar na impressão 
<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>