Ejemplos en vivo de Bootstrap 5.3 para navbar, cards, grid, formularios, un modal, alertas y botones, cada uno con su equivalente en Tailwind y un traductor de clases.
Bootstrap 5 construye layouts con clases ya hechas: navbar navbar-expand-lg para un menú, row y col-md-4 para un grid de 12 columnas, card para cajas de contenido, btn btn-primary para botones y alert alert-success para mensajes. Añade el CSS 5.3.3 desde un CDN, y el bundle de JavaScript solo para las partes interactivas como modales y dropdowns.
Clases principales de Bootstrap 5
Cada componente de abajo está escrito desde cero para Bootstrap 5.3 y se muestra en vivo, con la versión en Tailwind CSS al lado, para que puedas comparar los dos vocabularios o migrar una página de uno a otro. Un traductor de clases resuelve los cambios uno a uno más comunes.
Usa navbar-expand-lg (o md, sm) en el nav, añade un botón navbar-toggler con data-bs-toggle="collapse" y data-bs-target apuntando al id del menú, y envuelve los enlaces en un div con collapse navbar-collapse. El botón necesita el bundle de JavaScript de Bootstrap para abrir y cerrar.
Doce por fila. col-6 ocupa la mitad, col-4 un tercio, y los prefijos de breakpoint como col-md-4 se aplican a partir de ese ancho. Hay seis breakpoints: el predeterminado por debajo de 576px, y luego sm, md, lg, xl y xxl a 576, 768, 992, 1200 y 1400 píxeles.
Bootstrap es más rápido cuando quieres componentes terminados y un aspecto convencional con poco trabajo de diseño. Tailwind es más rápido cuando tienes tu propio diseño y construyes los componentes tú. Ambos tienen licencia MIT y están bien mantenidos.
No. Bootstrap 5 dejó jQuery. Sus plugins de JavaScript son JavaScript puro, y Popper es la única dependencia, incluida en el archivo bundle.
Los ejemplos se ejecutan en un marco aislado con los scripts desactivados, así que el modal se muestra ya abierto con las clases position-static y d-block. En una página real, el bundle de JavaScript lo abre, lo cierra y gestiona el foco.
Cada marco en vivo carga una copia sin modificar de la hoja de estilos de Bootstrap 5.3.3 que alojamos nosotros. En tu propio proyecto, cárgala desde el CDN oficial con el enlace que se muestra abajo. Los scripts están desactivados en los marcos, así que solo se ve la parte CSS de cada componente.
Pon la hoja de estilos en el head y el bundle antes de la etiqueta de cierre del body. Copia los hashes de integrity de getbootstrap.com y añádelos como atributos integrity y crossorigin.
navbar-expand mantiene los enlaces visibles a cualquier ancho, ya que el marco no puede ejecutar el script de collapse. En un sitio real, usa navbar-expand-lg con un toggler.
El mismo componente con clases de utilidad de Tailwind. Necesita una compilación de Tailwind, así que se muestra solo como código.
Tres cards comparten fila con separaciones g-3. Cambia col-4 por col-md-4 para que se apilen en el móvil.
El mismo componente con clases de utilidad de Tailwind. Necesita una compilación de Tailwind, así que se muestra solo como código.
Las columnas suman 12. Cada clase col-* es fija aquí para que veas el reparto; añade los prefijos sm, md o lg para cambios adaptables.
El mismo componente con clases de utilidad de Tailwind. Necesita una compilación de Tailwind, así que se muestra solo como código.
form-label y form-control dan campos coherentes; is-invalid con invalid-feedback muestra un error sin ningún script.
El mismo componente con clases de utilidad de Tailwind. Necesita una compilación de Tailwind, así que se muestra solo como código.
position-static y d-block muestran el modal dentro de la página para la demo. En una página real, quítalas y ábrelo con data-bs-toggle="modal".
El mismo componente con clases de utilidad de Tailwind. Necesita una compilación de Tailwind, así que se muestra solo como código.
Los colores contextuales vienen de los modificadores alert-*. Añade role="alert" solo a los mensajes que aparecen tras una acción.
El mismo componente con clases de utilidad de Tailwind. Necesita una compilación de Tailwind, así que se muestra solo como código.
Variantes sólida, outline, de tamaño y desactivada. Un enlace con estilo de botón solo lleva role=button cuando ejecuta una acción en lugar de navegar.
El mismo componente con clases de utilidad de Tailwind. Necesita una compilación de Tailwind, así que se muestra solo como código.
Son equivalencias cercanas, no exactas: los pasos de espaciado 1 a 5 de Bootstrap equivalen aproximadamente a 0.25, 0.5, 1, 1.5 y 3 rem, mientras que Tailwind usa 0.25 rem por paso.
Cambios uno a uno habituales
Traductor de clases de Bootstrap a Tailwind
Dirección
De Bootstrap a Tailwind
De Tailwind a Bootstrap
Clases a convertir
Resultado
Copiar
Se mantienen igual (sin equivalencia simple en el mapa de abajo): {list}
Todas las clases tenían equivalencia.
Empieza gratis · Sin tarjeta de crédito