Utilidades para diseño (Utilities for layout)
Para un desarrollo responsivo y adaptado a dispositivos móviles más rápido, Bootstrap incluye docenas de clases de utilidad para mostrar, ocultar, alinear y espaciar el contenido.
Cambiar display
Utiliza nuestras utilidades de visualización (display) para alternar de forma responsiva los valores comunes de la propiedad display. Combínalo con nuestro sistema de cuadrícula, contenido o componentes para mostrarlos u ocultarlos en ventanas gráficas específicas.
Opciones de Flexbox
Bootstrap está construido con flexbox, pero el display de no todos los elementos se ha cambiado a display: flex, ya que esto agregaría muchas anulaciones innecesarias y cambiaría inesperadamente comportamientos clave del navegador. La mayoría de nuestros componentes están construidos con flexbox habilitado.
Si necesitas agregar display: flex a un elemento, hazlo con .d-flex o una de las variantes responsivas (por ejemplo, .d-sm-flex). Necesitarás esta clase o valor de display para permitir el uso de nuestras utilidades de flexbox adicionales para dimensionamiento, alineación, espaciado y más.
Margen y relleno (Margin and padding)
Usa las utilidades de espaciado de margen (margin) y relleno (padding) para controlar cómo se espacian y dimensionan los elementos y componentes. Bootstrap incluye una escala de seis niveles para utilidades de espaciado, basada en una variable predeterminada $spacer con un valor de 1rem. Elige valores para todas las ventanas gráficas (por ejemplo, .me-3 para margin-right: 1rem en LTR), o elige variantes responsivas para apuntar a ventanas gráficas específicas (por ejemplo, .me-md-3 para margin-right: 1rem —en LTR— a partir del punto de interrupción md).
Alternar visibility
Cuando no sea necesario alternar el display, puedes alternar la visibilidad (visibility) de un elemento con nuestras utilidades de visibilidad. Los elementos invisibles seguirán afectando el diseño de la página, pero estarán ocultos visualmente para los visitantes.