1.2 — Quand (ne pas) utiliser Bootstrap
⏱️ TL;DR — Bootstrap brille quand vous voulez un résultat cohérent et rapide sans écrire de CSS : back-offices, prototypes, sites d’entreprise, projets d’équipe. Il est moins adapté si vous cherchez un design très singulier au poids minimal, ou si vous êtes déjà tout-Tailwind. Souvent, le bon choix dépend de qui écrit le CSS et combien de temps vous avez.
🎯 Objectifs
- Comparer Bootstrap, Tailwind et le CSS pur sur des critères concrets.
- Identifier les projets où Bootstrap est le meilleur choix.
- Éviter les fausses oppositions (« Bootstrap OU React »).
Bootstrap vs Tailwind vs CSS pur
| Critère | Bootstrap | Tailwind | CSS pur |
|---|---|---|---|
| Vitesse de démarrage | ⭐⭐⭐ (composants prêts) | ⭐⭐ (utilitaires, à assembler) | ⭐ |
| Design singulier | ⭐⭐ (reconnaissable) | ⭐⭐⭐ | ⭐⭐⭐ |
| Poids « out of the box » | Moyen (purgeable) | Faible (purgé par défaut) | Minimal |
| Courbe d’apprentissage | Douce | Moyenne | — |
| Cohérence en équipe | ⭐⭐⭐ | ⭐⭐⭐ | ⭐ |
| Composants JS inclus | ✅ (modale, dropdown…) | ❌ (à coder) | ❌ |
En résumé :
- Bootstrap = composants + utilitaires. Vous démarrez avec des briques finies.
- Tailwind = utilitaires seuls. Vous fabriquez chaque brique, mais avec un contrôle total.
- CSS pur = liberté et poids minimal, mais tout est à votre charge (grille, responsive, accessibilité…).
Quand Bootstrap est un excellent choix
- Back-offices / dashboards : formulaires, tableaux, modales — Bootstrap couvre 90 % des besoins sans design custom.
- Prototypes et MVP : passer d’une idée à une maquette cliquable en une heure.
- Sites d’entreprise / vitrines classiques où la vitesse compte plus que l’originalité.
- Équipes hétérogènes : un langage de classes commun réduit les divergences de style.
- Projets « server-rendered » (Rails, Django, Laravel, Symfony, WordPress…) où l’on ne veut pas un build front complexe.
Quand chercher ailleurs
- Vous visez un design très identitaire au pixel près et au poids minimal → Tailwind ou CSS pur.
- Votre équipe est déjà tout-Tailwind et outillée → rester cohérent.
- Vous ne voulez aucun JavaScript non maîtrisé côté client → prenez seulement le CSS de Bootstrap, pas le bundle JS.
⚠️ Piège — « Bootstrap, ça fait des sites qui se ressemblent tous. » C’est vrai si vous gardez le thème par défaut. En personnalisant les variables Sass (couleurs, rayons, typo — voir Partie 8), on obtient un rendu qui n’a plus rien du Bootstrap « d’usine ».
💡 Pour un dev React — Bootstrap et React ne s’opposent pas. Trois combinaisons valides : (1) le CSS seul de Bootstrap + vos composants React ; (2)
react-bootstrap(composants React officiels) ; (3) le CSS et le JS natif — déconseillé avec le SSR (voir Partie 11).
✏️ Exercices
- Pour un dashboard interne à livrer en 3 jours par une équipe de 4 devs sans designer, Bootstrap ou Tailwind ? Justifiez.
✅ Solution
Bootstrap : composants prêts (tableaux, formulaires, modales), langage commun pour l’équipe, aucun besoin de fabriquer les briques. Le design par défaut suffit pour un usage interne.
- Vrai ou faux : utiliser Bootstrap interdit d’utiliser React.
✅ Solution
Faux. On peut utiliser le CSS de Bootstrap dans un projet React, ou passer par react-bootstrap.
🧠 Quiz de révision
1. Quelle est la principale différence entre Bootstrap et Tailwind ?
Bootstrap fournit des composants finis (+ utilitaires) ; Tailwind ne fournit que des utilitaires à assembler.
2. Bootstrap inclut-il des composants JavaScript ?
Oui (modale, dropdown, offcanvas, carousel…). Tailwind non.
3. Comment éviter le look « Bootstrap d’usine » ?
Personnaliser les variables Sass (couleurs, typographie, rayons) et/ou les variables CSS.
4. Un projet server-rendered classique : bon terrain pour Bootstrap ?
Oui — pas de build front lourd requis, composants prêts.
5. Peut-on n’utiliser que le CSS sans le JS ?
Oui : il suffit d’inclure bootstrap.css sans bootstrap.bundle.js.
Chapitre suivant : 1.3 — Installation : CDN vs npm