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.
Use nossos utilitários de exibição para alternar responsivamente valores comuns da display
propriedade. Misture com nosso sistema de grade, conteúdo ou componentes para mostrá-los ou ocultá-los em janelas de visualização específicas.
O Bootstrap 4 é construído com flexbox, mas nem todos os elementos display
foram alterados, display: flex
pois 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: flex
a um elemento, faça isso com .d-flex
ou uma das variantes responsivas (por exemplo, .d-sm-flex
). Você precisará dessa classe ou display
valor para permitir o uso de nossos utilitários flexbox extras para dimensionamento, alinhamento, espaçamento e muito mais.
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-3
margin-right: 1rem
.mr-md-3
margin-right: 1rem
md
Quando display
a alternância não é necessária, você pode alternar a visibility
de 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.