Espaciado

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

Cómo funciona

Asignar sensibles ambiente margin o padding valores a un elemento o un subconjunto de sus lados con las clases de taquigrafía. 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 desde .25rem hasta 3rem .

Notación

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

Las clases se denominan utilizando el formato {property}{sides}-{size} de xs y {property}{sides}-{breakpoint}-{size} para sm , md , lg , y xl .

Donde la propiedad es una de:

• m - para clases que establecen margin
• p - para clases que establecen padding

Donde lados es uno de:

• t - para clases que establecen margin-top o padding-top
• b - para clases que establecen margin-bottom o padding-bottom
• l - para clases que establecen margin-left o padding-left
• r - para clases que establecen margin-right o padding-right
• x - para clases que establecen tanto *-left y *-right
• y - para clases que establecen tanto *-top y *-bottom
• en blanco: para clases que establecen a margin o padding en los 4 lados del elemento

Donde el tamaño es uno de:

• 0 - para clases que eliminan el margin o padding configurándolo en 0
• 1 - (por defecto) para clases que establecen el margin o padding en $spacer * .25
• 2 - (por defecto) para clases que establecen el margin o padding en $spacer * .5
• 3 - (por defecto) para clases que establecen el margin o padding en $spacer
• 4 - (por defecto) para clases que establecen el margin o padding en $spacer * 1.5
• 5 - (por defecto) para clases que establecen el margin o padding en $spacer * 3
• auto - para clases que configuran el margin en automático

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

Ejemplos

A continuación, se muestran 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-auto clase para centrar horizontalmente contenido de nivel de bloque de ancho fijo, es decir, contenido que tiene display: block y un width conjunto, estableciendo los márgenes horizontales en auto .

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

Margen negativo

En CSS, las margin propiedades pueden utilizar valores negativos ( padding no pueden). A partir de 4.2, hemos añadido utilidades margen negativo para cada tamaño entero no cero enumerados anteriormente (por ejemplo, 1 , 2 , 3 , 4 , 5 ). Estas utilidades son ideales para personalizar los canalones de las columnas de la cuadrícula en los puntos de corte.

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

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

Aquí hay un ejemplo de cómo personalizar la cuadrícula Bootstrap en el md punto de interrupción medio ( ) y superior. Hemos aumentado el .col relleno con .px-md-5 y luego lo hemos contrarrestado con .mx-md-n5 en el padre .row .

<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>