Tutorial Bootstrap: Espaciado margin y padding

Clases de margen

En Bootstrap, las clases de margen permiten controlar el espaciado externo de los elementos. Estas clases se utilizan para aplicar márgenes en uno o más lados de un elemento. Las clases de margen se componen de un prefijo m- seguido de un lado (top, bottom, start, end, x, y) y una escala de valores que varía de 0 a 5, auto o una unidad específica.

Las clases de margen se estructuran de la siguiente manera:

• m{lado}-{valor}: Aplica un margen específico en el lado indicado del elemento.
• m{t|b|s|e|x|y}-{valor}: Aplica un margen en una dirección específica.
  • t para top (arriba).
  • b para bottom (abajo).
  • s para start (inicio, izquierda en LTR).
  • e para end (final, derecha en LTR).
  • x para ambos lados horizontales (izquierda y derecha).
  • y para ambos lados verticales (arriba y abajo).

Los valores que se pueden asignar son:

• 0: Sin margen.
• 1: 0.25rem.
• 2: 0.5rem.
• 3: 1rem.
• 4: 1.5rem.
• 5: 3rem.
• auto: Aplica un margen automático, útil para centrar elementos.

Ejemplos de uso de clases de margen:

<div class="border border-primary m-3">...</div> <!-- Aplica un margen de 1rem en todos los lados -->

<div class="border border-warning mt-4">...</div> <!-- Aplica un margen de 1.5rem en el lado superior -->

<div class="border border-success mb-2">...</div> <!-- Aplica un margen de 0.5rem en el lado inferior -->

<div class="border border-danger ms-1">...</div> <!-- Aplica un margen de 0.25rem en el lado izquierdo (inicio) -->

<div class="border border-info me-5">...</div> <!-- Aplica un margen de 3rem en el lado derecho (final) -->

<div class="border border-dark mx-auto" style="width: 200px;">...</div> <!-- Aplica margen automático en los lados izquierdo y derecho -->

Para márgenes negativos, se utiliza el prefijo n delante del valor, permitiendo aplicar márgenes negativos. Están desactivados por defecto pero pueden activarse en Sass:

<div class="mt-n1">...</div> <!-- Aplica un margen negativo de -0.25rem en el lado superior -->

<div class="mb-n3">...</div> <!-- Aplica un margen negativo de -1rem en el lado inferior -->

Márgenes responsive

Los márgenes pueden ajustarse según el tamaño de pantalla utilizando breakpoints responsive:

<!-- Margen que cambia según el tamaño de pantalla -->
<div class="m-2 m-md-4 m-lg-5">...</div> <!-- 0.5rem en móvil, 1.5rem en tablet, 3rem en desktop -->

<!-- Margen superior responsive -->
<div class="mt-1 mt-sm-3 mt-xl-5">...</div> <!-- 0.25rem en XS, 1rem en SM, 3rem en XL -->

<!-- Margen horizontal responsive -->
<div class="mx-auto mx-md-0">...</div> <!-- Centrado en móvil, normal en tablet+ -->

Clases de padding

En Bootstrap, las clases de padding permiten controlar el espaciado interno de los elementos. Estas clases se utilizan para aplicar padding en uno o más lados de un elemento. La nomenclatura de las clases de padding sigue un esquema similar al de las clases de margen, utilizando el prefijo p- seguido de un lado (top, bottom, start, end, x, y) y una escala de valores que varía de 0 a 5.

Las clases de padding se estructuran de la siguiente manera:

• p{lado}-{valor}: Aplica un padding específico en el lado indicado del elemento.
• p{t|b|s|e|x|y}-{valor}: Aplica un padding en una dirección específica.
  • t para top (arriba).
  • b para bottom (abajo).
  • s para start (inicio, izquierda en LTR).
  • e para end (final, derecha en LTR).
  • x para ambos lados horizontales (izquierda y derecha).
  • y para ambos lados verticales (arriba y abajo).

Los valores que se pueden asignar son:

• 0: Sin padding.
• 1: 0.25rem.
• 2: 0.5rem.
• 3: 1rem.
• 4: 1.5rem.
• 5: 3rem.

Ejemplos de uso de clases de padding:

<div class="border border-primary p-3">...</div> <!-- Aplica un padding de 1rem en todos los lados -->

<div class="border border-warning pt-4">...</div> <!-- Aplica un padding de 1.5rem en el lado superior -->

<div class="border border-success pb-2">...</div> <!-- Aplica un padding de 0.5rem en el lado inferior -->

<div class="border border-danger ps-1">...</div> <!-- Aplica un padding de 0.25rem en el lado izquierdo (inicio) -->

<div class="border border-info pe-5">...</div> <!-- Aplica un padding de 3rem en el lado derecho (final) -->

<div class="border border-dark px-3">...</div> <!-- Aplica padding de 1rem en los lados izquierdo y derecho -->

Utilidades de gap

Bootstrap también proporciona utilidades de gap para espaciado entre elementos en contenedores flexbox y grid, ofreciendo una alternativa moderna al uso de márgenes individuales:

Gap en flexbox

<div class="d-flex gap-3">
  <div class="p-2 bg-light">Item 1</div>
  <div class="p-2 bg-light">Item 2</div>
  <div class="p-2 bg-light">Item 3</div>
</div>

Gap en grid

<div class="row g-4">
  <div class="col-md-4">
    <div class="p-3 bg-light">Columna 1</div>
  </div>
  <div class="col-md-4">
    <div class="p-3 bg-light">Columna 2</div>
  </div>
  <div class="col-md-4">
    <div class="p-3 bg-light">Columna 3</div>
  </div>
</div>

Gap responsive

<div class="d-flex gap-2 gap-md-4">
  <div class="p-2 bg-light">Item A</div>
  <div class="p-2 bg-light">Item B</div>
</div>

Las utilidades de gap son especialmente útiles para crear espaciado uniforme entre elementos sin necesidad de aplicar márgenes a cada elemento individual, simplificando el código y mejorando la consistencia del diseño.