Pular para o conteúdo principal Pular para a navegação de documentos
Check
in English

Utilitários para layout

Para um desenvolvimento responsivo e amigável para dispositivos móveis mais rápido, o Bootstrap inclui dezenas de classes de utilitários para mostrar, ocultar, alinhar e espaçar o conteúdo.

Mudandodisplay

Use nossos utilitários de exibição para alternar responsivamente valores comuns da displaypropriedade. Misture com nosso sistema de grade, conteúdo ou componentes para mostrá-los ou ocultá-los em janelas de visualização específicas.

Opções do Flexbox

O Bootstrap é construído com flexbox, mas nem todos os elementos displayforam alterados, display: flexpois isso adicionaria muitas substituições desnecessárias e alteraria inesperadamente os principais comportamentos do navegador. A maioria dos nossos componentes são construídos com flexbox habilitado.

Se você precisar adicionar display: flexa um elemento, faça isso com .d-flexou uma das variantes responsivas (por exemplo, .d-sm-flex). Você precisará dessa classe ou displayvalor para permitir o uso de nossos utilitários flexbox extras para dimensionamento, alinhamento, espaçamento e muito mais.

Margem e preenchimento

Use os utilitáriosmargin e espaçamento para controlar como os elementos e componentes são espaçados e dimensionados. O Bootstrap inclui uma escala de seis níveis para utilitários de espaçamento, com base em uma variável padrão de valor . Escolha valores para todas as janelas de visualização (por exemplo, para em LTR) ou escolha variantes responsivas para segmentar janelas de visualização específicas (por exemplo, para —em LTR— começando no ponto de interrupção).padding 1rem$spacer.me-3margin-right: 1rem.me-md-3margin-right: 1remmd

Alternarvisibility

Quando displaya alternância não é necessária, você pode alternar a visibilityde um elemento com nossos utilitários de visibilidade . Elementos invisíveis ainda afetarão o layout da página, mas ficam visualmente ocultos aos visitantes.