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>

margen negativo

En CSS, marginlas propiedades pueden utilizar valores negativos ( paddingno se puede). A partir de la versión 4.2, agregamos utilidades de margen negativo para cada tamaño de entero distinto de cero enumerado anteriormente (p. ej., 1, 2, 3, 4, 5). Estas utilidades son ideales para personalizar los canalones de las columnas de rejilla en los puntos de interrupción.

La sintaxis es casi la misma que las utilidades de margen positivo predeterminadas, pero con la adición de nantes del tamaño solicitado. Aquí hay una clase de ejemplo que es lo opuesto a .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Este es un ejemplo de cómo personalizar la cuadrícula de Bootstrap en el mdpunto de interrupción medio ( ) y superior. Hemos aumentado el .colrelleno con .px-md-5y luego lo hemos contrarrestado con .mx-md-n5el padre .row.

Relleno de columna personalizado

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>