Utilidades para el diseño

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

Cambiando display

Utilice nuestras utilidades de visualización para alternar de forma sensible los valores comunes de la display propiedad. Combínelo con nuestro sistema de cuadrícula, contenido o componentes para mostrarlos u ocultarlos en vistas específicas.

Opciones de caja flexible

Bootstrap 4 está construido con flexbox, pero no todos los elementos display se han cambiado a, 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 receptivas (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.

Margen y relleno

Utilice las utilidades de espaciado margin y para controlar cómo se espacian y dimensionan los elementos y componentes. Bootstrap 4 incluye una escala de cinco niveles para las utilidades de espaciado, basada en una variable predeterminada de valor . Elija valores para todas las vistas (p. Ej., Para ) o elija variantes sensibles para apuntar a vistas 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

Palanca visibility

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 ocultos visualmente para los visitantes.