Propriedade display

Rapido e responsivamente, alterne a visibilidade e outras coisas, com nossos utilitários de display. Além do mais, tenha suporte para alguns dos valores mais comuns, assim como alguns extras para controle do display durante impressões.

Como funciona

Altere o valor da propriedade display com nossas classes utilitárias e responsivas display. Propositalmente, nós só suportamos alguns de todos os possíveis valores para a propriedade display. No entanto, as classes podem ser combinadas para atingirmos os diferentes efeitos que queremos.

Notação

Classes utilitárias de display que afetam todos os breakpoints (do xs ao xl) não possuem abreviações, em si. Isto se deve ao fato destas classes serem definidas à partir de uma declaração min-width: 0; e, portanto, não são limitadas por media queries. Contudo, as demais classes possuem abreviação de breakpoint.

De tal maneira, classes são nomeadas de tal modo:

• .d-{valor} para o breakpoint xs;
• .d-{breakpoint}-{valor} para os breakpoints sm, md, lg e xl.

Onde a parte {valor} deve ser substituída por:

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

As media queries afetam as laguras das telas com o dado ou maior breakpoint. Por exemplo, .d-lg-none define display: none; tanto em telas de tamanho lg, quanto xl.

Exemplos

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

Escondendo elementos

Para um desenvolvimento rápido e mobile-friendly, use classes display responsivas para exibir ou esconder elementos, de acordo o tamanho do dispositivo. Com isso, evite criar versões inteiramente diferentes, mas esconda elementos em certos tamanhos de telas.

Para esconder elementos, simplesmente, use a classe .d-none ou uma das classes .d-{sm, md, lg ou xl}-none.

Para mostrar um elemento somente em uma escala de tamanho de telas, você pode combinar uma classe .d-*-none com uma .d-*-*. Por exemplo: .d-none .d-md-block .d-xl-none vai esconder o elemento em todas as telas, exceto em dispositivos médios e grandes.

<div class="d-lg-none">Esconde em telas maiores que lg</div>
<div class="d-none d-lg-block">Esconde em telas menores que lg</div>

Display durante impressão

Altere o valor display dos elementos, quando for imprimir, usando nossas classes utilitárias display. Você também terá suporte para os mesmos valores de display que nossos utilitários responsivos .d-* possuem.

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

Não esqueça: as classes print e display podem ser combinadas!

<div class="d-print-none">Exibe apenas em telas (esconde em impressões).</div>
<div class="d-none d-print-block">Exibe apenas em impressões (Esconde em telas).</div>
<div class="d-none d-lg-block d-print-block">Esconde em telas grandes, mas sempre mostra nas impressões.</div>