Espaciado
Bootstrap incluye una amplia gama de clases de utilidad de margen y relleno de respuesta abreviada para modificar la apariencia de un elemento.
Asigne valores responsive-friendly margin
o padding
a 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 .25rem
a 3rem
.
Las utilidades de espaciado que se aplican a todos los puntos de interrupción, de xs
a xl
, no tienen abreviatura de punto 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 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 xs
y {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
y 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 establecenmargin-top
opadding-top
b
- para clases que establecenmargin-bottom
opadding-bottom
l
- para clases que establecenmargin-left
opadding-left
r
- para clases que establecenmargin-right
opadding-right
x
- para las clases que establecen tanto*-left
y*-right
y
- para las clases que establecen tanto*-top
y*-bottom
- en blanco: para clases que establecen un
margin
opadding
en los 4 lados del elemento
Donde el tamaño es uno de:
0
- para las clases que eliminan elmargin
opadding
configurándolo en0
1
- (por defecto) para las clases que establecenmargin
opadding
en$spacer * .25
2
- (por defecto) para las clases que establecenmargin
opadding
en$spacer * .5
3
- (por defecto) para las clases que establecenmargin
opadding
en$spacer
4
- (por defecto) para las clases que establecenmargin
opadding
en$spacer * 1.5
5
- (por defecto) para las clases que establecenmargin
opadding
en$spacer * 3
auto
- para clases que configuran elmargin
auto
(Puede agregar más tamaños agregando entradas a la $spacers
variable del mapa Sass).
Estos son algunos ejemplos representativos de estas clases:
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, configurando los márgenes horizontales en auto
.