Espaciado

Bootstrap incluye una amplia gama de clases de utilidad de margen y relleno de respuesta abreviada para modificar la apariencia de un elemento.

Cómo funciona

Asigne valores responsive-friendly margino paddinga un elemento o un subconjunto de sus lados con clases abreviadas. Incluye soporte para propiedades individuales, todas las propiedades y propiedades verticales y horizontales. Las clases se crean a partir de un mapa Sass predeterminado que va de .25rema 3rem.

Notación

Las utilidades de espaciado que se aplican a todos los puntos de interrupción, de xsa xl, no tienen abreviatura de punto de interrupción. Esto se debe a que esas clases se aplican desde min-width: 0y hacia arriba y, por lo tanto, no están vinculadas a una consulta de medios. Sin embargo, los puntos de interrupción restantes sí incluyen una abreviatura de punto de interrupción.

Las clases se nombran utilizando el formato {property}{sides}-{size}for xsy {property}{sides}-{breakpoint}-{size}for sm, md, lgy xl.

Donde la propiedad es una de:

m- para las clases que establecenmargin
p- para las clases que establecenpadding

Donde lados es uno de:

t- para clases que establecen margin-topopadding-top
b- para clases que establecen margin-bottomopadding-bottom
l- para clases que establecen margin-leftopadding-left
r- para clases que establecen margin-rightopadding-right
x- para las clases que establecen tanto *-lefty*-right
y- para las clases que establecen tanto *-topy*-bottom
en blanco: para clases que establecen un margino paddingen los 4 lados del elemento

Donde el tamaño es uno de:

0- para las clases que eliminan el margino paddingconfigurándolo en0
1- (por defecto) para las clases que establecen margino paddingen$spacer * .25
2- (por defecto) para las clases que establecen margino paddingen$spacer * .5
3- (por defecto) para las clases que establecen margino paddingen$spacer
4- (por defecto) para las clases que establecen margino paddingen$spacer * 1.5
5- (por defecto) para las clases que establecen margino paddingen$spacer * 3
auto- para clases que configuran el marginauto

(Puede agregar más tamaños agregando entradas a la $spacersvariable del mapa Sass).

Ejemplos

Estos son algunos ejemplos representativos de estas clases:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Centrado horizontal

Además, Bootstrap también incluye una .mx-autoclase para centrar horizontalmente contenido de nivel de bloque de ancho fijo, es decir, contenido que tiene display: blocky un widthconjunto, configurando los márgenes horizontales en auto.

elemento centrado

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>