← Voltar

Utilitários Responsivos

Esconder, mostrar, virar de lado e realinhar — sem escrever uma media query.

O conceito

O grid não é a única coisa responsiva do Bootstrap. Quase todo utilitário aceita um infixo de breakpoint no meio do nome, e a leitura é sempre a mesma:

d-md-none

d

A propriedade — aqui, display.

md

A partir de qual tela vale. Sem infixo = vale desde 0px.

none

O valor que a propriedade recebe.

A pegadinha mais comum: d-none d-md-block não quer dizer "esconde no md". Quer dizer "esconde sempre, e a partir de 768px mostra" — porque a regra maior sobrescreve a menor. Para esconder só no desktop é o contrário: d-lg-none.

Repare em algo na simulação abaixo: todo elemento declara também a classe base, sem infixo (d-block d-md-none, e não só d-md-none). Escrever o estado do celular primeiro e depois o do desktop é o próprio jeito mobile-first de pensar — e deixa o código explícito sobre o que acontece em cada faixa.

Largura da tela

1200 px
xl
MinhaPágina ☰ Menu

Título do artigo

No celular este texto fica centralizado. A partir de 992px ele se alinha à esquerda.

O que cada elemento está fazendo agora

Elemento Classes Agora