Espaciado
Bootstrap incluye una amplia gama de clases de utilidad responsive de margen, relleno y espacio gap para modificar la apariencia de un elemento.
Margen y relleno
Asigna valores responsive 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
desde .25rem
hasta 3rem
.
Notación
Las utilidades de espaciado que se aplican a todos los puntos de interrupción, desde xs
hasta
xxl
, no tienen abreviaturas de punto de interrupción. Esto se debe a que esas clases se aplican
desde min-width: 0
en adelante y, por lo tanto, no están vinculadas a una media query. Los puntos
de interrupción restantes, sin embargo, incluyen una abreviatura de punto de interrupción.
Las clases se nombran usando el formato {property}{sides}-{size}
para xs
y
{property}{sides}-{breakpoint}-{size}
para sm
, md
, lg
,
xl
y xxl
.
Donde property es una de:
m
- para clases que establecenmargin
p
- para clases que configuranpadding
Donde sides es uno de:
t
- para clases que establecenmargin-top
opadding-top
b
- para clases que establecenmargin-bottom
opadding-bottom
s
- (start) para clases que establecenmargin-left
opadding-left
en LTR,margin-right
opadding-right
en RTLe
- (end) para clases que establecenmargin-right
opadding-right
en LTR,margin-left
opadding-left
en RTLx
- para clases que configuran tanto*-left
como*-right
y
- para clases que configuran tanto*-top
como*-bottom
- en blanco - para clases que establecen un
margin
opadding
en los 4 lados del elemento
Donde size es uno de:
0
- para clases que eliminan elmargin
o elpadding
configurándolo en0
1
- (por defecto) para clases que establecen elmargin
opadding
en$spacer * .25
2
- (por defecto) para clases que establecen elmargin
opadding
en$spacer * .5
3
- (por defecto) para clases que establecen elmargin
opadding
en$spacer
4
- (por defecto) para clases que establecen elmargin
opadding
en$spacer * 1.5
5
- (por defecto) para clases que establecen elmargin
opadding
en$spacer * 3
auto
- para clases que establecen elmargin
en auto
(Puedes agregar más tamaños agregando entradas a la variable de mapa Sass $spacers
).
Ejemplos
Aquí tienes algunos ejemplos representativos de estas clases:
.mt-0 {
margin-top: 0 !important;
}
.ms-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 clase .mx-auto
para centrar horizontalmente contenido a
nivel de bloque de ancho fijo, es decir, contenido que tiene display: block
y un conjunto de
width
, estableciendo los márgenes horizontales en auto
.
<div class="mx-auto p-2" style="width: 200px;">
Centered element
</div>
Margen negativo
En CSS, las propiedades margin
pueden utilizar valores negativos (padding
no).
Estos márgenes negativos están deshabilitados de forma predeterminada, pero se pueden
habilitar en Sass configurando $enable-negative-margins: true
.
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;
}
Gap
Cuando usas display: grid
o display: flex
, puedes hacer uso de las utilidades
gap
en el elemento padre. Esto puede ahorrarte la necesidad de agregar utilidades de margen a
elementos secundarios individuales de una cuadrícula o contenedor flexible. Las utilidades Gap son responsive
de forma predeterminada y se generan a través de nuestra API de utilidades, basada en el mapa
$spacers
Sass.
<div class="grid gap-3">
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div>
</div>
El soporte incluye opciones responsive para todos los puntos de interrupción de la cuadrícula de Bootstrap,
así como seis tamaños del mapa $spacers
(0
–5
). No existe una clase de
utilidad .gap-auto
, ya que en realidad es lo mismo que .gap-0
.
row-gap
row-gap
establece el espacio vertical entre elementos secundarios en el contenedor especificado.
<div class="grid gap-0 row-gap-3">
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div>
</div>
column-gap
column-gap
establece el espacio horizontal entre elementos secundarios en el contenedor
especificado.
<div class="grid gap-0 column-gap-3">
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div>
</div>
CSS
Mapas de Sass
Las utilidades de espaciado se declaran a través del mapa Sass y luego se generan con nuestra API de utilidades.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
API de utilidades de Sass
Las utilidades de espaciado se declaran en nuestra API de utilidades en scss/_utilities.scss
. Aprende a utilizar la API de utilidades.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),
// Gap utility
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"row-gap": (
responsive: true,
property: row-gap,
class: row-gap,
values: $spacers
),
"column-gap": (
responsive: true,
property: column-gap,
class: column-gap,
values: $spacers
),