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.
Utilice nuestras utilidades de visualización para alternar de manera receptiva los valores comunes de la display
propiedad. Mézclelo con nuestro sistema de cuadrícula, contenido o componentes para mostrarlos u ocultarlos en ventanas gráficas específicas.
Bootstrap 4 está construido con flexbox, pero no display
se han cambiado todos los elementos, display: flex
ya 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: flex
a un elemento, hágalo con .d-flex
o una de las variantes de respuesta (por ejemplo, .d-sm-flex
). Necesitará esta clase o display
valor para permitir el uso de nuestras utilidades adicionales de flexbox para dimensionamiento, alineación, espaciado y más.
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-3
margin-right: 1rem
.mr-md-3
margin-right: 1rem
md
Cuando display
no es necesario alternar, puede alternar el 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.