Saltearse al contenido
Esdocu

Uso de las utilidades de Espaciado en Bootstrap

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 establecen margin
  • p - para clases que configuran 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 configuran tanto *-left como *-right
  • y - para clases que configuran tanto *-top como *-bottom
  • en 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 el 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 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:

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

HTML
    <div class="mx-auto p-2" style="width: 200px;">
        Elemento centrado
    </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:

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

HTML
    <div class="grid gap-3">
        <div class="p-2 g-col-6">Elemento de cuadrícula 1</div>
        <div class="p-2 g-col-6">Elemento de cuadrícula 2</div>
        <div class="p-2 g-col-6">Elemento de cuadrícula 3</div>
        <div class="p-2 g-col-6">Elemento de cuadrícula 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.

HTML
    <div class="grid gap-0 row-gap-3">
        <div class="p-2 g-col-6">Elemento de cuadrícula 1</div>
        <div class="p-2 g-col-6">Elemento de cuadrícula 2</div>
        <div class="p-2 g-col-6">Elemento de cuadrícula 3</div>
        <div class="p-2 g-col-6">Elemento de cuadrícula 4</div>
    </div>

column-gap

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

HTML
    <div class="grid gap-0 column-gap-3">
        <div class="p-2 g-col-6">Elemento de cuadrícula 1</div>
        <div class="p-2 g-col-6">Elemento de cuadrícula 2</div>
        <div class="p-2 g-col-6">Elemento de cuadrícula 3</div>
        <div class="p-2 g-col-6">Elemento de cuadrícula 4</div>
    </div>

Personalización del 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.

scss/_variables.scss

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

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