Bootstrap
Tutorial Bootstrap: Utilidades de espaciado y alineación
Bootstrap CSS 5.3: Aprende a utilizar las utilidades de espaciado y alineación para controlar márgenes, padding y disposición de elementos en tus diseños web.
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
paratop
(arriba).b
parabottom
(abajo).s
parastart
(inicio, izquierda en LTR).e
paraend
(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
paratop
(arriba).b
parabottom
(abajo).s
parastart
(inicio, izquierda en LTR).e
paraend
(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.
Ejercicios de esta lección Utilidades de espaciado y alineación
Evalúa tus conocimientos de esta lección Utilidades de espaciado y alineación con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Listado y formulario de productos en Bootstrap CSS
Utilidades de colores y fondo
Instalación de Bootstrap
Tipografía y fuentes en Bootstrap
Clases de utilidad
Flexbox en Bootstrap
Utilidades de espaciado y alineación
Conocimiento general de Bootstrap
Conocimiento general de Bootstrap
Fundamentos del sistema de grid de Bootstrap
Imágenes responsive en Bootstrap
Introducción a Bootstrap
Formularios y validación
Modales y ventanas emergentes
Navbars y menús de navegación en Bootstrap
Componentes de Bootstrap
Todas las lecciones de Bootstrap
Accede a todas las lecciones de Bootstrap y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Bootstrap Css
Introducción Y Entorno
Instalación De Bootstrap Css
Introducción Y Entorno
Tipografía Y Fuentes En Bootstrap
Fundamentos Y Layout
Imágenes Responsive En Bootstrap
Fundamentos Y Layout
Fundamentos Del Sistema De Grid De Bootstrap
Fundamentos Y Layout
Flexbox En Bootstrap
Fundamentos Y Layout
Componentes De Bootstrap
Componentes
Navbars Y Menús De Navegación En Bootstrap
Componentes
Formularios Y Validación
Componentes
Modales Y Ventanas Emergentes
Componentes
Clases De Utilidad
Utilidades Y Helpers
Utilidades De Espaciado Y Alineación
Utilidades Y Helpers
Utilidades De Colores Y Fondo
Utilidades Y Helpers
Conocimiento General De Bootstrap
Evaluación
Conocimiento General De Bootstrap
Evaluación
Certificados de superación de Bootstrap
Supera todos los ejercicios de programación del curso de Bootstrap y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender el uso de clases de margen (
m-
) para aplicar espacios externos a los elementos. - Entender las clases de padding (
p-
) para gestionar los espacios internos de un elemento. - Utilizar clases de alineación (
justify-content-
,align-items-
,align-self-
) para disponer elementos en contenedores flex y grid. - Aprender a aplicar márgenes negativos y su activación en Sass.
- Implementar clases específicas para la alineación dentro del sistema de grid de Bootstrap.