Resumen de clases Bootstrap 5. Cheat sheet (chuleta)
Resumen clases Bootstrap 5
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.
Contenidos del artículo
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
Tabla 1. Diferencias entre Bootstrap 4 y Bootstrap 5
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
Tabla 2. Clases renombradas en Bootstrap 5
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.
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.
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.
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
Tabla 12. Clases para tablas
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.
Tabla 13. Clases para colorear las tablas
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
Tabla 14. Clases para alineamiento de texto en celdas
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.
¡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.