Utilidades para diseño de layout
Para un desarrollo responsive y compatible con dispositivos móviles más rápido, Bootstrap incluye docenas de clases de utilidad para mostrar, ocultar, alinear y espaciar contenido.
Cambiando display
Utiliza nuestras utilidades de visualización para alternar de
forma responsive los valores comunes de la propiedad display. Mézclalo con nuestro sistema de
cuadrícula, 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 cada elemento a
display: flex ya que esto agregaría muchos elementos innecesarios y sobrescribirí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 uno de las
variantes responsive (por ejemplo .d-sm-flex). Necesitarás esta clase o valor
display para permitir el uso de nuestras utilidades
flexbox adicionales para dimensionar, alinear, espaciar y más.
Margen y relleno
Usa las utilidades margin y padding de
espaciado 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 un valor predeterminado de
1rem para la variable $spacer. Elige valores para todas los viewports (p. ej.,
.me-3 para margin-right: 1rem en LTR) o elige variantes responsive para apuntar a
viewports específicas (p. ej., .me-md-3 para margin-right: 1rem —en LTR— comenzando
en el punto de interrupción md).
Alterna visibility
Cuando no es necesario alternar display, puedes alternar visibility de un elemento
con nuestras utilidades de visibilidad. Los elementos invisibles
seguirán afectando el diseño de la página, pero están visualmente ocultos para los visitantes.