11.4 — Quand (ne pas) choisir Bootstrap en React
⏱️ TL;DR — Bootstrap en React est un bon choix pour livrer vite un back-office ou un MVP avec des composants prêts et accessibles (via react-bootstrap). Il l’est moins pour un design très singulier au poids minimal, où Tailwind + une lib headless (Radix, shadcn/ui) offrent plus de contrôle. Le facteur décisif : vitesse & cohérence vs contrôle & identité.
🎯 Objectifs
- Décider entre Bootstrap, Tailwind et headless en React.
- Comprendre les compromis.
L’arbre de décision
Comparatif React
| Critère | react-bootstrap | Tailwind + headless (Radix/shadcn) |
|---|---|---|
| Vitesse de démarrage | ⭐⭐⭐ | ⭐⭐ |
| Composants accessibles fournis | ✅ | ✅ (Radix) mais à styler |
| Design singulier | ⭐⭐ | ⭐⭐⭐ |
| Poids | moyen (purgeable) | faible |
| Courbe d’apprentissage | douce | moyenne |
| Cohérence out-of-the-box | ⭐⭐⭐ | à construire |
Bootstrap gagne quand…
- Vous livrez un back-office / dashboard ou un MVP rapidement.
- L’équipe veut un langage de composants commun sans construire de design system.
- L’identité visuelle n’est pas un différenciateur clé.
- Vous avez déjà des maquettes « Bootstrap-friendly ».
Cherchez ailleurs quand…
- Le design est un argument produit (SaaS grand public, marque forte).
- Vous visez le poids minimal absolu.
- L’équipe est déjà tout-Tailwind et outillée (shadcn/ui, tokens).
Une voie hybride
Rien n’interdit d’utiliser le CSS de Bootstrap pour la grille et les utilitaires tout en construisant vos propres composants React stylés. Mais mélanger Bootstrap et Tailwind sur le même projet est déconseillé (deux resets, deux échelles, conflits) — choisissez-en un.
⚠️ Piège — Adopter Bootstrap et Tailwind « pour avoir le meilleur des deux » : vous cumulez deux preflight/reboot, deux systèmes d’espacement et des collisions de classes. Le coût de maintenance dépasse vite le bénéfice.
💡 Pour un dev React — Honnêtement : pour un produit avec une forte identité, Tailwind + shadcn/ui est souvent plus adapté aujourd’hui. Pour un outil interne, un admin, un MVP ou un site où livrer vite et cohérent prime, react-bootstrap reste imbattable en temps de mise en œuvre.
✏️ Exercices
- Un back-office interne à livrer en une semaine : quel choix ?
✅ Solution
react-bootstrap : composants prêts, accessibles, cohérents, rapides à assembler.
- Pourquoi éviter Bootstrap + Tailwind ensemble ?
✅ Solution
Double reset, échelles d’espacement concurrentes, collisions de classes → maintenance coûteuse.
🧠 Quiz de révision
1. Cas idéal pour react-bootstrap ?
Back-office / MVP à livrer vite, avec cohérence sans design system maison.
2. Cas où préférer Tailwind + headless ?
Design fortement identitaire, poids minimal, équipe déjà outillée Tailwind.
3. Peut-on mélanger Bootstrap et Tailwind ?
Techniquement oui, mais déconseillé (conflits, double reset).
4. Radix/shadcn fournissent quoi que Bootstrap fournit aussi ?
Des composants accessibles (mais à styler soi-même côté Tailwind).
5. Le facteur de décision principal ?
Vitesse & cohérence (Bootstrap) vs contrôle & identité (Tailwind/headless).
🎉 Fin de la Partie 11 ! Partie suivante : Partie 12 — Accessibilité & RTL