Resumen de clases Bootstrap 5. Cheat sheet (chuleta)

Después de completar el tutorial de Bootstrap 5, te presentamos este resumen de clases de Bootstrap. En este resumen tipo chuleta (cheat sheet) encontrarás un listado detallado organizado en tablas de todas las clases y componentes que hemos aprendido, lo que te permitirá tener una referencia rápida y práctica a la hora de diseñar y desarrollar sitios web responsivos.

Resumen de clases Bootstrap 5. Cheat sheet (chuleta)

Esperamos que este resumen de clases de Bootstrap 5 te sea de gran utilidad y te ayude a potenciar tus habilidades como desarrollador front-end y que puedas utilizarlo como una chuleta a mano disponible para cualquier duda.

1. Diferencias entre Bootstrap 4 y Bootstrap 5

Diferencias	Bootstrap 4	Bootstrap 5
Columnas	5 niveles (xs, sm, md, lg, xl)	6 niveles (xs, sm, md, lg, xl, xxl)
Colores	Colores limitados	Colores adicionales con una paleta de colores mejorada
Jquery	Tiene Jquery	Jquery se elimina y se cambia a Vanilla JS
Internet Explorer	Compatible con IE 10 y 11	No compatible con IE 10 y 11
Formularios	Los botones de opción y las casillas de verificación tienen un aspecto distinto en diferentes navegadores	El aspecto de los elementos del formulario no cambia en los diferentes navegadores
Iconos	No tiene sus propios iconos SVG, tenemos que importar una fuente como FontAwesome	Tiene sus propios iconos SVG
Jumbotron	Soporta	No soporta jumbotron
Card deck	Card deck se utiliza para crear tarjetas con el mismo ancho y alto	Card deck ha sido eliminado
Navbar	Cuenta con la propiedad inline-block	Se elimina la propiedad inline-block
Generador de sitio estático	Utiliza el software Jekyll	Utiliza el software Hugo

2. Clases renombradas en Bootstrap 4 y 5

Bootstrap 4	Bootstrap 5
.left-*	.start-*
.right-*	.end-*
.float-left	.float-start
.float-right	.float-end
.border-left	.border-start
.border-right	.border-end
.rounded-left	.rounded-start
.rounded-right	.rounded-end
.ml-*	.ms-*
.mr-*	.me-*
.pl-*	.ps-*
.pr-*	.pe-*
.text-left	.text-start
.text-right	.text-end
.text-monospace	.font-monospace
.text-hide	Ya no se usa
.font-style-*	.fst-*
.rounded-sm → .rounded-lg	.rounded-0 → .rounded-3
.btn-block	Ya no se usa
.jumbotron	Ya no se usa

3. Tipos de contenedores

Clase	Descripción
.container	El contenido aparece centrado y con un ancho fijo.
.container-fluid	El contenido ocupa todo el ancho disponible (100%).
.container-{PuntoRuptura}	El contenido ocupa todo el ancho disponible (100%) hasta que se alcanza el punto de ruptura especificado. Por ejemplo, .container-sm se aplicará hasta el punto de ruptura definido para dispositivos pequeños, .container-md para dispositivos medianos, .container-lg para dispositivos grandes, etc.

Ver más →

4. Clases para ajustar contenedores

Clase	Extra small<576px	Small≥576px	Medium≥768px	Large≥992px	X-Large≥1200px	XX-Large≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

Ver más →

5. Filas y columnas

Clase	Descripción
.row	Define una fila. Las filas deben contener columnas (.col) para alinear el contenido correctamente.
.col	Define una columna. Puedes utilizar .col para crear un diseño de columnas responsivo.
.col-*	Define el tamaño de cada columna (división estándar de 12 columnas)
.col-xx-*	Utiliza .col-xx-* para definir el ancho de la columna en dispositivos de diferentes tamaños (xx representa el breakpoint o punto de ruptura sm, md, lg, xl, y xxl). El asterisco indica el tamaño de división.

Ver más →

5.1. Alineamiento horizontal de columnas

Clase	Descripción
.justify-content-start	Alinea las columnas al inicio de la fila.
.justify-content-center	Alinea las columnas al centro de la fila.
.justify-content-end	Alinea las columnas al final de la fila.
.justify-content-between	Distribuye el espacio entre las columnas de manera uniforme, con la primera columna al inicio y la última al final de la fila.
.justify-content-around	Distribuye el espacio alrededor de las columnas de manera uniforme.
.justify-content-evenly	Distribuye el espacio entre y alrededor de las columnas de manera uniforme.

Ver más →

5.2. Alineamiento vertical de columnas

Clase	Descripción
.align-items-start	Alinea las columnas en la parte de arriba de la fila.
.align-items-center	Alinea las columnas en el centro de la fila.
.align-items-end	Alinea las columnas en la parte de abajo de la fila.
.align-self-start	Alinea individualmente una columna en la parte de arriba de la fila.
.align-self-center	Alinea individualmente una columna al centro de la fila.
.align-self-end	Alinea individualmente una columna en la parte de abajo de la fila.

Ver más →

6. Colores en Bootstrap 5

Tabla 8: Colores básicos en Bootstrap 5

Colores básicos en Bootstrap 5
Color	Nombre	HEX
	Primary	#0d6efd
	Secondary	#6c757d
	Success	#198754
	Danger	#dc3545
	Warning	#ffc107
	Info	#0dcaf0
	Light	#f8f9fa
	Dark	#000

Ejemplo

Elemento	Clase (.elemento-color)	Ejemplo
Textos	.text-primary	<p class="text-primary">Texto</p>
Fondo del texto	.text-bg-color	<p class="text-bg-primary">Texto</p>
Fondos	.bg-primary	<div class="bg-primary">Contenido</div>
Bordes	.border-primary	<div class="border-primary">Contenido</div>
Tablas	.table-primary	<table class="table table-primary">...</table>
Botones	.btn-primary	<button class="btn btn-primary">Botón</button>
Botones con bordes	.btn-outline-primary	<button class="btn btn-outline-primary">Botón</button>
Enlaces	.link-primary	<a href="#" class="link-primary">Enlace</a>

Ver más →

7. Textos en Bootstrap 5

Clase	Descripción
.h*	Encabezados con el mismo estilo que los encabezados predefinidos h1, h2… Utiliza .h1 hasta .h6.
.display-*	Encabezados de mayor tamaño. Utiliza tamaños desde .display-1 (el más grande) hasta .display-6 (el más pequeño).
.text-start	Alinea el texto al inicio del elemento.
.text-center	Alinea el texto al centro del elemento.
.text-end	Alinea el texto al final del elemento.
.text-wrap	Ajusta el texto dentro del elemento para que se ajuste al ancho del contenedor.
.text-nowrap	Evita que el texto se ajuste y desborde del contenedor.
.text-break	Evita que cadenas largas de texto rompan el diseño de tus componentes.
.text-lowercase	Transforma el texto a minúsculas.
.text-uppercase	Transforma el texto a mayúsculas.
.text-capitalize	Transforma el texto con la primera letra en mayúscula.
.fs-*	Cambia el tamaño de la fuente del texto. Utiliza tamaños desde fs-1 (el más grande) hasta fs-6 (el más pequeño).
.fw-*	Cambia el peso o densidad del trazo de la fuente del texto. Utiliza pesos desde .fw-light (el más ligero) hasta .fw-bold (el más pesado). También puedes utilizar .fw-normal para restablecer el peso de la fuente al valor por defecto.
.fst-*	Cambia el estilo de la fuente del texto. Utiliza .fst-italic para aplicar un estilo cursivo al texto y .fst-normal para restablecer el estilo de la fuente al valor por defecto.

Ver más →

8. Colores de los textos

Clase	Descripción
.text-primary	Color de texto primario (azul)
.text-secondary	Color de texto secundario (gris)
.text-muted	Color de texto tenue o deshabilitado
.text-success	Color de texto para indicar éxito (verde)
.text-danger	Color de texto para indicar peligro (rojo)
.text-warning	Color de texto para indicar advertencia (amarillo)
.text-info	Color de texto para información (azul claro)
.text-white	Color de texto blanco
.text-dark	Color de texto oscuro
.text-light	Color de texto claro (gris claro)
.text-black-50	Texto negro con opacidad del 50%
.text-white-50	Texto blanco con opacidad del 50%

Ver más →

9. Tablas

Clase	Descripción
table	Clase base para crear una tabla básica
table-striped	Alterna colores de fila para mejorar la legibilidad
table-bordered	Añade bordes a las celdas de la tabla
table-borderless	Elimina los bordes de la tabla y las celdas
table-hover	Resalta las filas al pasar el ratón por encima
table-active	Resaltar una fila o celda
table-sm	Reduce el tamaño de fuente y el espaciado de la tabla, no se ajusta al contenedor
table-responsive	Hace que la tabla sea responsive. Se pone en el contenedor padre de <table>
.table-responsive-{xx} {sm-md-lg-xl-xxl}	Hace que la tabla sea responsive en los tamaños inferiores a los siguientes: .table-responsive-sm < 576px .table-responsive-md < 768px .table-responsive-lg < 992px .table-responsive-xl < 1200px
.caption-top	Poner el título de la tabla arriba

9.1. Colores en tablas

Clase	Descripción
table-dark	Aplica un tema oscuro a la tabla.
table-light	Aplica un tema claro a la tabla.
table-primary	Aplica un color de fondo de estilo primario a la tabla.
table-secondary	Aplica un color de fondo de estilo secundario a la tabla.
table-success	Aplica un color de fondo de estilo éxito a la tabla.
table-danger	Aplica un color de fondo de estilo peligro a la tabla.
table-warning	Aplica un color de fondo de estilo advertencia a la tabla.
table-info	Aplica un color de fondo de estilo informativo a la tabla.
table-light	Aplica un color de fondo de estilo claro a la tabla.
table-dark	Aplica un color de fondo de estilo oscuro a la tabla.
table-active	Resalta una fila o celda específica con un color de fondo activo.

9.2. Alineamiento en tablas

Clase	Descripción
align-middle	Alinea el contenido verticalmente al centro de la celda.
align-top	Alinea el contenido verticalmente en la parte superior de la celda.
align-bottom	Alinea el contenido verticalmente en la parte inferior de la celda.
text-start	Alinea el texto a la izquierda
text-center	Alinea el texto al centro
text-end	Alinea el texto a la derecha

Ver más →

10. Imágenes en Bootstrap 5

Clase	Descripción
.img-fluid	Hace que la imagen sea fluida, es decir, se ajusta al ancho del contenedor que la contiene sin desbordar.
.rounded	Agrega bordes redondeados a la imagen.
.rounded-circle	Hace que la imagen tenga forma de círculo, útil para fotos de perfil y avatares.
.rounded-0	Elimina los bordes redondeados de la imagen.
.img-thumbnail	Agrega un estilo de marco con sombra a la imagen, creando un aspecto de miniatura.
.float-start	Flota la imagen a la izquierda del texto o del contenedor.
.float-end	Flota la imagen a la derecha del texto o del contenedor.
.mx-auto	Centra horizontalmente la imagen en su contenedor.
.my-auto	Centra verticalmente la imagen en su contenedor.
.d-block	Convierte la imagen en un bloque para que ocupe todo el ancho del contenedor y respete el espacio vertical.
.d-inline	Hace que la imagen se muestre en línea con el texto, sin ocupar todo el ancho del contenedor.
.d-inline-block	Hace que la imagen se muestre en línea con el texto y permita ajustar su tamaño y margen.

Ver más →

11. Botones en Bootstrap 5

Clase	Descripción
.btn	Clase base para dar estilo a un botón. Negro
.btn-primary	Estilo para resaltar la acción principal. Azul
.btn-secondary	Estilo para una acción secundaria. Gris
.btn-success	Estilo para indicar una acción exitosa. Verde
.btn-danger	Estilo para indicar una acción peligrosa o de error. Rojo
.btn-warning	Estilo para indicar una acción de advertencia. Amarillo
.btn-info	Estilo para indicar una acción informativa. Azul claro
.btn-light	Estilo para un botón con fondo claro. Gris claro
.btn-dark	Estilo para un botón con fondo oscuro. Negro
.btn-link	Estilo para un botón que se parece a un enlace.
.btn-outline-primary	Botón con borde y texto en color primario.
.btn-outline-secondary	Botón con borde y texto en color secundario.
.btn-outline-success	Botón con borde y texto en color de éxito.
.btn-outline-danger	Botón con borde y texto en color de peligro o error.
.btn-outline-warning	Botón con borde y texto en color de advertencia.
.btn-outline-info	Botón con borde y texto en color de información.
.btn-outline-light	Botón con borde y texto en color claro.
.btn-outline-dark	Botón con borde y texto en color oscuro.
.btn-lg	Tamaño grande para el botón.
.btn-sm	Tamaño pequeño para el botón.
.disabled	Deshabilita el botón para que no se pueda hacer clic.
.active	Muestra el botón en un estado activo, útil para indicar que la acción está actualmente seleccionada.
.btn-group	Agrupa un conjunto de botones horizontalmente.
.btn-group-vertical	Agrupa un conjunto de botones verticalmente.
.btn-toolbar	Agrupa un conjunto de botones y barras de herramientas.

Ver más →

12. Bordes en Bootstrap 5

Clase	Descripción
.rounded	Agrega bordes redondeados a todos los lados del elemento.
.rounded-top	Agrega bordes redondeados solo a la parte superior del elemento.
.rounded-end	Agrega bordes redondeados solo al extremo derecho del elemento (depende de la dirección del texto).
.rounded-bottom	Agrega bordes redondeados solo a la parte inferior del elemento.
.rounded-start	Agrega bordes redondeados solo al extremo izquierdo del elemento (depende de la dirección del texto).
.rounded-circle	Crea un borde redondeado para hacer que el elemento tenga forma de círculo.
.rounded-0	Elimina los bordes redondeados para que el elemento tenga esquinas cuadradas.
.rounded-*	Agrega esquina redondeada. El tamaño va de .rounded-1 (menor redondeo) a rounded 3.
.border	Agrega un borde al elemento.
.border-0	Elimina el borde del elemento.
.border-*	Agrega un borde de grosor 1, 2, 3, 4 o 5. Siendo .border-1 el grosor menor.
.border-top	Agrega un borde solo en la parte superior del elemento.
.border-end	Agrega un borde solo en el extremo derecho del elemento (depende de la dirección del texto).
.border-bottom	Agrega un borde solo en la parte inferior del elemento.
.border-start	Agrega un borde solo en el extremo izquierdo del elemento (depende de la dirección del texto).
.border-primary	Agrega un borde de color primario al elemento.
.border-secondary	Agrega un borde de color secundario al elemento.
.border-success	Agrega un borde de color de éxito al elemento.
.border-danger	Agrega un borde de color de peligro o error al elemento.
.border-warning	Agrega un borde de color de advertencia al elemento.
.border-info	Agrega un borde de color de información al elemento.
.border-light	Agrega un borde de color claro al elemento.
.border-dark	Agrega un borde de color oscuro al elemento.
.border-white	Agrega un borde de color blanco al elemento.

Ver más →

13. Padding y margin en Bootstrap 5

Clase	Descripción
.p-0 .py-0 .px-0	Aplica un padding de 0 (sin padding) a todos los lados (.p-0), solo verticalmente (.py-0) o solo horizontalmente (.px-0).
.p-1 .py-1 .px-1	Aplica un padding pequeño a todos los lados (.p-1), solo verticalmente (.py-1) o solo horizontalmente (.px-1).
.p-2 .py-2 .px-2	Aplica un padding mediano a todos los lados (.p-2), solo verticalmente (.py-2) o solo horizontalmente (.px-2).
.p-3 .py-3 .px-3	Aplica un padding grande a todos los lados (.p-3), solo verticalmente (.py-3) o solo horizontalmente (.px-3).
.p-4 .py-4 .px-4	Aplica un padding extra grande a todos los lados (.p-4), solo verticalmente (.py-4) o solo horizontalmente (.px-4).
.p-5 .py-5 .px-5	Aplica un padding gigante a todos los lados (.p-5), solo verticalmente (.py-5) o solo horizontalmente (.px-5).
.m-0 .my-0 .mx-0	Aplica un margin de 0 (sin margen) a todos los lados (.m-0), solo verticalmente (.my-0) o solo horizontalmente (.mx-0).
.m-1 .my-1 .mx-1	Aplica un margin pequeño a todos los lados (.m-1), solo verticalmente (.my-1) o solo horizontalmente (.mx-1).
.m-2 .my-2 .mx-2	Aplica un margin mediano a todos los lados (.m-2), solo verticalmente (.my-2) o solo horizontalmente (.mx-2).
.m-3 .my-3 .mx-3	Aplica un margin grande a todos los lados (.m-3), solo verticalmente (.my-3) o solo horizontalmente (.mx-3).
.m-4 .my-4 .mx-4	Aplica un margin extra grande a todos los lados (.m-4), solo verticalmente (.my-4) o solo horizontalmente (.mx-4).
.m-5 .my-5 .mx-5	Aplica un margin gigante a todos los lados (.m-5), solo verticalmente (.my-5) o solo horizontalmente (.mx-5).
.m-t .p-t	Aplica margin-top o padding-top, dependiendo de la propiedad que utilices (.m para margin y .p para padding).
.m-b .p-b	Aplica margin-bottom o padding-bottom, dependiendo de la propiedad que utilices (.m-b para margin y .p-b para padding).
.m-s .p-s	Aplica margin-left o un padding-left.
.m-e .p-e	Aplica margin-right o un padding-right.
.m-x .p-x	Aplica tanto margin-left como margin-right o padding-right y padding-left.
.m-y .p-y	Aplica tanto margin-top y margin-bottom como padding-top y padding-bottom.
.m-auto, .p-auto	Aplica margin o padding en los cuatro lados del elemento y establece el valor «auto» para la propiedad, lo que permite centrar horizontalmente el elemento en el contenedor.

Ver más →

14. Resumen de Componentes en Bootstrap 5

Componente	Descripción
Navbar	Barra de navegación responsiva y personalizable que permite la navegación entre diferentes secciones.
Carousel	Carrusel de imágenes y contenido deslizable que permite mostrar múltiples elementos en un espacio reducido.
Modal	Ventana emergente que muestra contenido adicional o formularios sin cambiar de página.
Accordion	Panel desplegable que permite mostrar y ocultar contenido de forma interactiva.
Cards	Tarjetas de contenido con imagen, título y descripción para presentar información de manera atractiva.
Forms	Estilos y elementos mejorados para crear formularios más agradables y fáciles de usar.
Buttons	Botones con diferentes estilos y tamaños para llamar la atención del usuario y realizar acciones.
Alerts	Mensajes de notificación para mostrar información importante o mensajes de error.
Dropdowns	Menús desplegables que permiten seleccionar opciones.
Collapse	Contenido que se puede colapsar o expandir para ahorrar espacio en la página.
Tabs	Pestañas que organizan el contenido en diferentes secciones.
Pagination	Dividir grandes conjuntos de datos en páginas más pequeñas para facilitar la navegación.
Badges	Elementos visuales que muestran información destacada, como notificaciones o conteos.
Progress	Barra que muestra el avance de una tarea o proceso.
Spinners	Iconos animados que indican que se está cargando o esperando contenido.
Tooltips y Popovers	Elementos emergentes que muestran información adicional al pasar el cursor sobre un elemento.
Toasts	Mensajes temporales y no intrusivos que se muestran en la parte superior o inferior de la pantalla.
List group	Listas de elementos con estilos personalizados que pueden incluir encabezados y contenido adicional.

Ver más →

¡Enhorabuena! Has completado el tutorial de Bootstrap 5 y ahora cuentas con un práctico resumen de clases de Bootstrap 5 a tu disposición. Con esta guía rápida tipo chuleta, podrás acelerar tus proyectos de diseño web y crear páginas visualmente atractivas y responsivas de forma sencilla.