Tutorial Bootstrap: Utilidades de espaciado y alineación

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-black mx-auto">...</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 -->

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, auto o una unidad específica.

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.
• auto: Aplica un padding automático, aunque este valor es menos común en padding.

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-black px-auto">...</div> <!-- Aplica padding automático en los lados izquierdo y derecho -->

Clases de alineación

En Bootstrap, las clases de alineación permiten alinear elementos de manera horizontal y vertical dentro de contenedores flexibles y de grid. Estas clases se utilizan para controlar la alineación de elementos hijos en un contenedor padre, facilitando la creación de diseños complejos y adaptativos.

Alineación horizontal

Para alinear elementos horizontalmente, se utilizan las clases de alineación de contenido flex (justify-content-). Estas clases se aplican a un contenedor flex y distribuyen los elementos hijos a lo largo del eje principal (horizontal en la mayoría de los casos).

• justify-content-start: Alinea los elementos al inicio del contenedor.
• justify-content-end: Alinea los elementos al final del contenedor.
• justify-content-center: Centra los elementos en el contenedor.
• justify-content-between: Distribuye los elementos con espacio igual entre ellos.
• justify-content-around: Distribuye los elementos con espacio igual alrededor de ellos.
• justify-content-evenly: Distribuye los elementos con espacios iguales entre ellos y en los bordes del contenedor.

Ejemplo de uso de clases de alineación horizontal:

<div class="border d-flex justify-content-center">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

Alineación vertical

Para alinear elementos verticalmente, se utilizan las clases de alineación de elementos flex (align-items-). Estas clases se aplican a un contenedor flex y alinean los elementos hijos a lo largo del eje cruzado (vertical en la mayoría de los casos).

• align-items-start: Alinea los elementos al inicio del contenedor (arriba).
• align-items-end: Alinea los elementos al final del contenedor (abajo).
• align-items-center: Centra los elementos en el contenedor.
• align-items-baseline: Alinea los elementos a lo largo de su línea base.
• align-items-stretch: Estira los elementos para que llenen el contenedor.

Ejemplo de uso de clases de alineación vertical:

<div class="border d-flex align-items-center" style="height: 200px;">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

Alineación individual

Para alinear elementos individuales dentro de un contenedor flex, se utilizan las clases de alineación propia (align-self-). Estas clases permiten alinear un solo elemento de manera diferente a los demás elementos del contenedor.

• align-self-start: Alinea el elemento al inicio del contenedor (arriba).
• align-self-end: Alinea el elemento al final del contenedor (abajo).
• align-self-center: Centra el elemento en el contenedor.
• align-self-baseline: Alinea el elemento a lo largo de su línea base.
• align-self-stretch: Estira el elemento para que llene el contenedor.

Ejemplo de uso de clases de alineación individual:

<div class="border d-flex" style="height: 200px;">
  <div class="align-self-start">Elemento 1</div>
  <div class="align-self-center">Elemento 2</div>
  <div class="align-self-end">Elemento 3</div>
</div>

Alineación en grid

Bootstrap también proporciona clases de alineación específicas para el sistema de grid. Estas clases permiten alinear elementos dentro de las filas y columnas del grid.

• align-content-start: Alinea el contenido al inicio de la fila.
• align-content-end: Alinea el contenido al final de la fila.
• align-content-center: Centra el contenido en la fila.
• align-content-between: Distribuye el contenido con espacio igual entre ellos.
• align-content-around: Distribuye el contenido con espacio igual alrededor de ellos.
• align-content-stretch: Estira el contenido para que llene la fila.

Ejemplo de uso de clases de alineación en grid:

<div class="border row align-content-center" style="height: 200px;">
  <div class="col">Columna 1</div>
  <div class="col">Columna 2</div>
  <div class="col">Columna 3</div>
</div>

Estas clases de alineación son esenciales para crear diseños flexibles y adaptativos, permitiendo un control preciso sobre la disposición de los elementos dentro de los contenedores.