Skip to main content Skip to docs navigation
Ver en GitHub

Espaciado (Spacing)

Bootstrap incluye una amplia gama de clases de utilidad responsivas y abreviadas de margen (margin), relleno (padding) y espacio (gap) para modificar la apariencia de un elemento.

En esta página

Margen y relleno (Margin and padding)

Asigna valores de margin o padding adaptables a dispositivos móviles 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 construyen a partir de un mapa Sass predeterminado que va desde .25rem a 3rem.

¿Utilizas el módulo de diseño CSS Grid? Considera usar la utilidad gap en su lugar.

Notación

Las utilidades de espaciado que se aplican a todos los puntos de interrupción, desde xs hasta xxl, no tienen abreviatura 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 por 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 uno de:

  • m: para clases que establecen el margen (margin)
  • p: para clases que establecen el relleno (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 in 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
  • blanco: 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 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 ancho (width) establecido) configurando los márgenes horizontales en auto.

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

Margen negativo (Negative margin)

En CSS, las propiedades de margen (margin) pueden utilizar valores negativos (el relleno, padding, no puede). Estos márgenes negativos están deshabilitados por defecto, 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 agregando n antes del tamaño solicitado. Aquí tienes una clase de ejemplo que es lo opuesto a .mt-1:

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

Espacio (Gap)

Al usar display: grid o display: flex, puedes hacer uso de las utilidades gap en el elemento padre. Esto puede evitar tener que agregar utilidades de margen a los elementos secundarios individuales de un contenedor de cuadrícula o flex. Las utilidades de espacio (gap) son responsivas de forma predeterminada y se generan a través de nuestra API de utilidades, basada en el mapa Sass $spacers.

Elemento de cuadrícula 1
Elemento de cuadrícula 2
Elemento de cuadrícula 3
Elemento de cuadrícula 4
html 
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
  <div class="p-2">Elemento de cuadrícula 1</div>
  <div class="p-2">Elemento de cuadrícula 2</div>
  <div class="p-2">Elemento de cuadrícula 3</div>
  <div class="p-2">Elemento de cuadrícula 4</div>
</div>

El soporte incluye opciones responsivas para todos los puntos de interrupción de cuadrícula de Bootstrap, así como seis tamaños del mapa $spacers (0–5). No existe una clase de utilidad .gap-auto ya que es efectivamente lo mismo que .gap-0.

row-gap

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

Elemento de cuadrícula 1
Elemento de cuadrícula 2
Elemento de cuadrícula 3
Elemento de cuadrícula 4
html 
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
  <div class="p-2">Elemento de cuadrícula 1</div>
  <div class="p-2">Elemento de cuadrícula 2</div>
  <div class="p-2">Elemento de cuadrícula 3</div>
  <div class="p-2">Elemento de cuadrícula 4</div>
</div>

column-gap

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

Elemento de cuadrícula 1
Elemento de cuadrícula 2
Elemento de cuadrícula 3
Elemento de cuadrícula 4
html 
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
  <div class="p-2">Elemento de cuadrícula 1</div>
  <div class="p-2">Elemento de cuadrícula 2</div>
  <div class="p-2">Elemento de cuadrícula 3</div>
  <div class="p-2">Elemento de cuadrícula 4</div>
</div>

CSS

Mapas Sass

Las utilidades de espaciado se declaran a través del 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 a utilizar 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
),