Utilidades para layout
Para un desarrollo más rápido y responsivo apto para móviles, Bootstrap incluye docenas de clases utilitarias para mostrar, ocultar, alinear y espaciar contenido.
Cambiar display
Usa nuestras utilidades de display para alternar
de forma responsiva los valores comunes de la propiedad display. Combínalas con nuestro sistema
de grid, contenido o componentes para mostrarlos u ocultarlos en viewports específicos.
Opciones de Flexbox
Bootstrap está construido con flexbox, pero no se ha cambiado el display de
todos los elementos a display: flex, ya que esto añadiría muchas sobrescrituras innecesarias y
cambiaría comportamientos clave del navegador de forma inesperada. La mayoría de nuestros componentes están construidos con flexbox habilitado.
Si necesitas añadir display: flex a un elemento, hazlo con
.d-flex o una de las variantes responsivas (ej., .d-sm-flex). Necesitarás esta clase
o valor de display para poder usar nuestras utilidades
adicionales de flexbox para tamaño, alineación, espaciado y más.
Margen y padding
Usa las utilidades de espaciado de
margin y padding para controlar cómo se espacian y dimensionan los elementos y
componentes. Bootstrap incluye una escala de seis niveles para las utilidades de espaciado, basada en un valor
predeterminado de 1rem de la variable $spacer. Elige valores para todos los
viewports (ej., .me-3 para margin-right: 1rem en LTR), o selecciona variantes
responsivas para apuntar a viewports específicos (ej., .me-md-3 para
margin-right: 1rem —en LTR— a partir del breakpoint md).
Alternar visibilidad
Cuando no necesites alternar display, puedes alternar la
visibilidad de un elemento con nuestras utilidades de
visibilidad. Los elementos invisibles seguirán afectando el layout de la página, pero estarán ocultos
visualmente para los visitantes.