Exemples Bootstrap 5.3 en direct pour la navbar, les cards, la grille, les formulaires, un modal, les alertes et les boutons, chacun avec son équivalent Tailwind et un traducteur de classes.
Bootstrap 5 construit les mises en page à partir de classes prêtes à l'emploi : navbar navbar-expand-lg pour un menu, row et col-md-4 pour une grille de 12 colonnes, card pour les blocs de contenu, btn btn-primary pour les boutons et alert alert-success pour les messages. Ajoutez le CSS 5.3.3 depuis un CDN, et le bundle JavaScript uniquement pour les parties interactives comme les modals et les menus déroulants.
Classes essentielles de Bootstrap 5
Chaque composant ci-dessous est écrit de zéro pour Bootstrap 5.3 et affiché en direct, avec la version Tailwind CSS du même élément à côté, pour comparer les deux vocabulaires ou porter une page de l'un à l'autre. Un traducteur de classes gère les correspondances directes les plus courantes.
Utilisez navbar-expand-lg (ou md, sm) sur le nav, ajoutez un bouton navbar-toggler avec data-bs-toggle="collapse" et data-bs-target pointant vers l'id du menu, et enveloppez les liens dans une div avec collapse navbar-collapse. Le bouton a besoin du bundle JavaScript de Bootstrap pour ouvrir et fermer le menu.
Douze par ligne. col-6 occupe la moitié, col-4 un tiers, et les préfixes de breakpoint comme col-md-4 s'appliquent à partir de cette largeur. Il existe six breakpoints : celui par défaut sous 576px, puis sm, md, lg, xl et xxl à 576, 768, 992, 1200 et 1400 pixels.
Bootstrap est plus rapide quand vous voulez des composants finis et un rendu classique avec peu de travail de design. Tailwind est plus rapide quand vous avez votre propre design et construisez vous-même les composants. Les deux sont sous licence MIT et bien maintenus.
Non. Bootstrap 5 a abandonné jQuery. Ses plugins JavaScript sont écrits en JavaScript pur, et Popper est la seule dépendance, incluse dans le fichier bundle.
Les exemples s'exécutent dans une frame isolée avec les scripts désactivés, le modal est donc affiché déjà ouvert grâce aux classes position-static et d-block. Sur une vraie page, le bundle JavaScript l'ouvre, le ferme et gère le focus.
Chaque frame en direct charge une copie non modifiée de la feuille de style Bootstrap 5.3.3 que nous hébergeons nous-mêmes. Dans votre propre projet, chargez-la depuis le CDN officiel avec le lien indiqué ci-dessous. Les scripts sont désactivés dans les frames, seule la partie CSS de chaque composant s'affiche donc.
Placez la feuille de style dans le head et le bundle avant la balise body fermante. Copiez les hash d'intégrité depuis getbootstrap.com et ajoutez-les comme attributs integrity et crossorigin.
navbar-expand garde les liens visibles à toutes les largeurs, car la frame ne peut pas exécuter le script collapse. Sur un vrai site, utilisez navbar-expand-lg avec un toggler.
Le même composant avec des classes utilitaires Tailwind. Il nécessite un build Tailwind, il est donc affiché uniquement sous forme de code.
Trois cards partagent une ligne avec des gouttières g-3. Remplacez col-4 par col-md-4 pour qu'elles s'empilent sur téléphone.
Le même composant avec des classes utilitaires Tailwind. Il nécessite un build Tailwind, il est donc affiché uniquement sous forme de code.
Les colonnes totalisent 12. Chaque classe col-* est fixe ici pour que vous voyiez la répartition ; ajoutez les préfixes sm, md ou lg pour des changements responsive.
Le même composant avec des classes utilitaires Tailwind. Il nécessite un build Tailwind, il est donc affiché uniquement sous forme de code.
form-label et form-control donnent des champs homogènes ; is-invalid avec invalid-feedback affiche une erreur sans aucun script.
Le même composant avec des classes utilitaires Tailwind. Il nécessite un build Tailwind, il est donc affiché uniquement sous forme de code.
position-static et d-block affichent le modal dans le flux pour la démo. Sur une vraie page, retirez-les et ouvrez-le avec data-bs-toggle="modal".
Le même composant avec des classes utilitaires Tailwind. Il nécessite un build Tailwind, il est donc affiché uniquement sous forme de code.
Les couleurs contextuelles viennent des modificateurs alert-*. N'ajoutez role="alert" qu'aux messages qui apparaissent après une action.
Le même composant avec des classes utilitaires Tailwind. Il nécessite un build Tailwind, il est donc affiché uniquement sous forme de code.
Variantes pleines, outline, de taille et désactivées. Un lien stylé en bouton ne garde role=button que s'il déclenche une action plutôt qu'une navigation.
Le même composant avec des classes utilitaires Tailwind. Il nécessite un build Tailwind, il est donc affiché uniquement sous forme de code.
Ce sont des correspondances approchées, pas exactes : les paliers d'espacement Bootstrap de 1 à 5 correspondent à environ 0.25, 0.5, 1, 1.5 et 3 rem, alors que Tailwind utilise 0.25 rem par palier.
Correspondances directes courantes
Traducteur de classes Bootstrap vers Tailwind
Sens
Bootstrap vers Tailwind
Tailwind vers Bootstrap
Classes à convertir
Résultat
Copier
Conservées telles quelles (aucune correspondance simple dans la table ci-dessous) : {list}
Chaque classe a trouvé une correspondance.
Commencer gratuitement · Sans carte bancaire