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 4 é 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 4 inclui uma escala de cinco 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 ) ou escolha variantes responsivas para segmentar janelas de visualização específicas (por exemplo, para iniciar no ponto de interrupção).padding 1rem$spacer.mr-3margin-right: 1rem.mr-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.