Utilitário da propriedade display
As classes utilitárias da propriedade display no Bootstrap 5 permitem o controle da exibição de elementos em diferentes dispositivos e situações.
Elas são nomeadas de acordo com a seguinte convenção:
.d-{value}para xs.d-{breakpoint}-{value}parasm,md,lg,xlexxl
Onde {value} pode ser um dos seguintes: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex.
<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>
Essas classes permitem que você defina a exibição de elementos em diferentes situações, como ocultar elementos em dispositivos móveis ou exibir elementos em formato de tabela.
Por exemplo, para ocultar um elemento em dispositivos de tela grande ou maiores, você pode usar a classe d-lg-none. Porém, caso você queira escondê-lo para dispositivos com a tela menor que a grande, você pode utilizar a classe d-none d-lg-block.
<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>
Além disso, o Bootstrap 5 também oferece suporte a classes de exibição de impressão, como .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 e .d-print-inline-flex. Essas classes permitem que você defina a exibição de elementos quando a página é impressa.
<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>