Display

Controlam a propriedade display e a visibilidade de qualquer elemento.

`display`

Classes no formato .d-{valor} (ou .d-{breakpoint}-{valor}, veja breakpoints abaixo), para os valores:

Valor	Classe	`display` aplicado
none	`.d-none`	`none` — remove o elemento do fluxo (equivalente a escondê-lo)
inline	`.d-inline`	`inline`
inline-block	`.d-inline-block`	`inline-block`
block	`.d-block`	`block`
table	`.d-table`	`table`
table-row	`.d-table-row`	`table-row`
table-cell	`.d-table-cell`	`table-cell`
flex	`.d-flex`	`flex`
inline-flex	`.d-inline-flex`	`inline-flex`
contents	`.d-contents`	`contents` — remove a “caixa” do elemento, mas mantém os filhos no fluxo

Display na impressão

Os mesmos valores acima, prefixados com d-print-, mas só têm efeito dentro de @media print — ou seja, só mudam o display quando a página é impressa (ex.: .d-print-none esconde um elemento apenas na impressão, sem afetar a tela).

Visibilidade e opacidade

Classe	O que faz
`.invisible`	`visibility: hidden` — esconde visualmente mas mantém o espaço ocupado no layout
`.hide`	`display: none` — remove do fluxo (diferente de `.invisible`, não reserva espaço)
`[hidden]`	Reforça `display: none !important` para o atributo HTML `hidden`
`.opacity-visible`	`opacity: 1`
`.opacity-invisible`	`opacity: 0` — some visualmente mas continua clicável/ocupando espaço

Breakpoints responsivos

A maioria dos utilitários abaixo aceita um infixo de breakpoint no meio do nome da classe: .{prefixo}-{breakpoint}-{valor} (ex.: .d-md-none, .text-lg-center, .gap-xl--lg). O breakpoint funciona mobile-first: a classe vale a partir da largura mínima indicada até o próximo breakpoint.

Breakpoint	Infixo	Largura mínima
Extra small	(nenhum, classe base)	0
Small	`sm`	576px
Medium	`md`	768px
Large	`lg`	992px
Extra large	`xl`	1200px
Extra extra extra large	`xxxl`	1920px

Visão ao vivo

Storybook mds-styles (HTML/CSS) — utilities-display ↗