Utilidades para el diseño
Para un desarrollo responsive y listo para dispositivos móviles, Bootstrap incluye docenas de clases de utilidades para mostrar, ocultar, alinear y espaciar el contenido.

Cambiar el display
Utiliza nuestras utilidades de visualización para alternar de manera 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 Flexbox
Bootstrap está construido con flexbox, pero no se ha cambiado la propiedad display
de todos los elementos a display: flex
, ya que esto agregaría muchas sobrescrituras innecesarias y cambiaría inesperadamente los 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 responsive (por ejemplo, .d-sm-flex
). Necesitarás esta clase o el valor display
para permitir el uso de nuestras utilidades flexbox adicionales para ajustar el tamaño, la alineación, el espaciado y más.
Tal vez te interese
Margin y padding
Usa margin
y padding
utilidades de espaciado 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 una variable $spacer
predeterminada de valor 1rem
. Elije valores para todos los viewports (p. ej., .me-3
para margin-right: 1rem
en LTR) o elije variantes responsive para apuntar a viewports específicos (p. ej., .me-md-3
para margin-right: 1rem
—en LTR— comenzando en el punto de interrupción md
).
Alternar visibility
Cuando no es necesario alternar display
, puedes alternar la propiedad 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.