Espaciado

Bootstrap incluye una amplia gama de clases utilitarias responsivas abreviadas de margin, padding, y gap para modificar la apariencia de un elemento.

On this page

Margen y padding

Asigna valores de margin o padding responsivos a un elemento o a un subconjunto de sus lados con clases abreviadas. Incluye soporte para propiedades individuales, todas las propiedades, y propiedades verticales y horizontales. Las clases se construyen a partir de un mapa Sass predeterminado que va desde .25rem hasta 3rem.

¿Usas el módulo de layout CSS Grid? Considera usar la utilidad gap en su lugar.

Notación

Las utilidades de espaciado que se aplican a todos los breakpoints, desde xs hasta xxl, no tienen abreviatura de breakpoint. Esto se debe a que esas clases se aplican desde min-width: 0 hacia arriba, y por lo tanto no están limitadas por una media query. Los breakpoints restantes, sin embargo, sí incluyen una abreviatura de breakpoint.

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 uno de:

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

Donde sides es uno de:

t - para clases que establecen margin-top o padding-top
b - para clases que establecen margin-bottom o padding-bottom
s - (start) para clases que establecen margin-left o padding-left en LTR, margin-right o padding-right en RTL
e - (end) para clases que establecen margin-right o padding-right en LTR, margin-left o padding-left en RTL
x - para clases que establecen tanto *-left como *-right
y - para clases que establecen tanto *-top como *-bottom
blank - para clases que establecen un margin o padding en los 4 lados del elemento

Donde size es uno de:

0 - para clases que eliminan el margin o padding estableciéndolo en 0
1 - (por defecto) para clases que establecen el margin o padding a $spacer * .25
2 - (por defecto) para clases que establecen el margin o padding a $spacer * .5
3 - (por defecto) para clases que establecen el margin o padding a $spacer
4 - (por defecto) para clases que establecen el margin o padding a $spacer * 1.5
5 - (por defecto) para clases que establecen el margin o padding a $spacer * 3
auto - para clases que establecen el margin en auto

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

Ejemplos

Aquí hay 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 de nivel bloque con ancho fijo—es decir, contenido que tiene display: block y un width establecido—mediante la configuración de los márgenes horizontales en auto.

Elemento centrado

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

Margin negativo

En CSS, las propiedades de margin pueden utilizar valores negativos (padding no puede). Estos márgenes negativos están desactivados por defecto, pero se pueden activar en Sass estableciendo $enable-negative-margins: true.

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

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

Gap

Al usar display: grid o display: flex, puedes hacer uso de las utilidades gap en el elemento padre. Esto puede ahorrar tener que añadir utilidades de margin a los hijos individuales de un contenedor grid o flex. Las utilidades gap son responsive por defecto, y se generan a través de nuestra API de utilidades, basadas en el mapa Sass $spacers.

Elemento de grid 1

Elemento de grid 2

Elemento de grid 3

Ítem grid 4

html

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

El soporte incluye opciones responsivas para todos los breakpoints de la grid de Bootstrap, así como seis tamaños del mapa $spacers (0–5). No hay una clase utilitaria .gap-auto ya que es efectivamente lo mismo que .gap-0.

row-gap

row-gap establece el espacio vertical entre los elementos hijos en el contenedor especificado.

Elemento de grid 1

Elemento de grid 2

Elemento de grid 3

Ítem grid 4

html

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

column-gap

column-gap establece el espacio horizontal entre los elementos hijos en el contenedor especificado.

Elemento de grid 1

Elemento de grid 2

Elemento de grid 3

Ítem grid 4

html

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

CSS

Mapas de Sass

Las utilidades de espaciado se declaran mediante un mapa Sass y luego se generan con nuestra API de utilidades.

scss/_variables.scss

$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 cómo usar la API de utilidades.

scss/_utilities.scss

"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
),