Utilidades para el diseño

Para un desarrollo receptivo y compatible con dispositivos móviles más rápido, Bootstrap incluye docenas de clases de utilidades para mostrar, ocultar, alinear y espaciar el contenido.

Cambiandodisplay

Utilice nuestras utilidades de visualización para alternar de manera receptiva los valores comunes de la displaypropiedad. Mézclelo con nuestro sistema de cuadrícula, contenido o componentes para mostrarlos u ocultarlos en ventanas gráficas específicas.

Opciones de caja flexible

Bootstrap 4 está construido con flexbox, pero no displayse han cambiado todos los elementos, display: flexya que esto agregaría muchas anulaciones innecesarias y cambiaría inesperadamente los comportamientos clave del navegador. La mayoría de nuestros componentes están construidos con flexbox habilitado.

Si necesita agregar display: flexa un elemento, hágalo con .d-flexo una de las variantes de respuesta (por ejemplo, .d-sm-flex). Necesitará esta clase o displayvalor para permitir el uso de nuestras utilidades adicionales de flexbox para dimensionamiento, alineación, espaciado y más.

Margen y relleno

Utilice las utilidades de espaciadomargin y para controlar el espaciado y el tamaño de los elementos y componentes. Bootstrap 4 incluye una escala de cinco niveles para las utilidades de espaciado, en función de una variable predeterminada de valor . Elija valores para todas las ventanas gráficas (p. ej., para ) o elija variantes receptivas para apuntar a ventanas gráficas específicas (p. ej., para comenzar en el punto de interrupción).padding 1rem$spacer.mr-3margin-right: 1rem.mr-md-3margin-right: 1remmd

Palancavisibility

Cuando displayno es necesario alternar, puede alternar el visibilityde 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.