1.1 — Qu’est-ce que Bootstrap ?
⏱️ TL;DR — Bootstrap est un framework front-end open source (MIT) né chez Twitter en 2011. Il fournit trois choses : une grille responsive, une bibliothèque de composants (boutons, cartes, modales…) et des classes utilitaires, personnalisables via Sass et des variables CSS. La version actuelle est la 5.3.
🎯 Objectifs
- Situer Bootstrap dans l’histoire du web.
- Nommer les trois piliers du framework.
- Comprendre ce que Bootstrap n’est pas.
Une brève histoire
Bootstrap est né en 2011 chez Twitter, d’abord sous le nom de Twitter Blueprint, comme un outil interne pour uniformiser les interfaces. Rendu open source la même année, il est vite devenu le framework CSS le plus populaire du web.
| Version | Année | Apport majeur |
|---|---|---|
| 2 | 2012 | Responsive optionnel, composants |
| 3 | 2013 | Mobile-first, flat design |
| 4 | 2018 | Flexbox, Sass (fini Less), cartes |
| 5 | 2021 | Fini jQuery, CSS variables, grille améliorée |
| 5.3 | 2023 | Color modes / dark mode natif, palette étendue |
| 6 | en dev | « reset conceptuel » (voir Partie 13) |
La rupture la plus importante pour un dev moderne est Bootstrap 5 : plus de dépendance à jQuery, un JavaScript en modules ES natifs, et une architecture pilotée par les custom properties CSS.
Les trois piliers
- La grille — un système de 12 colonnes fluide, basé sur Flexbox, avec des points de rupture (breakpoints) responsives. C’est le squelette de toute page.
- Les composants — du HTML + CSS (+ parfois JS) prêts à coller : boutons, cartes, barres de navigation, fenêtres modales, carrousels… Vous écrivez des classes, pas du CSS.
- Les utilitaires — des petites classes atomiques (
.mt-3,.text-center,.d-none) pour ajuster sans écrire de CSS. C’est la partie qui ressemble le plus à Tailwind.
Le tout se personnalise : soit à la source en recompilant le Sass (variables, maps), soit à la volée via les variables CSS (--bs-*).
Ce que Bootstrap n’est pas
- Pas un framework JavaScript comme React ou Vue : il ne gère pas l’état ni le rendu. Son JS se limite à animer quelques composants (modale, dropdown…).
- Pas obligatoirement lourd : on peut n’importer que la grille, ou que quelques composants (voir Partie 8 et 13).
- Pas incompatible avec React : il existe
react-bootstrap, et on peut aussi n’utiliser que le CSS.
💡 Pour un dev React — Pensez à Bootstrap comme à une design library CSS-first : là où vous composeriez des composants React stylés, Bootstrap vous donne des classes et un peu de JS impératif. Dans un projet React, on préfère souvent
react-bootstrap(des composants React qui produisent le bon markup) plutôt que le JS natif de Bootstrap.
📚 Aller plus loin — La page officielle « About » détaille l’équipe, la licence MIT et la feuille de route.
✏️ Exercices
- Citez les trois piliers de Bootstrap et donnez un exemple de classe pour chacun.
✅ Solution
- Grille :
col-md-6(une colonne qui prend la moitié à partir du breakpointmd). - Composant :
btn btn-primary(un bouton). - Utilitaire :
mt-3(marge haute de taille 3).
- Quelle version de Bootstrap a supprimé la dépendance à jQuery ?
✅ Solution
Bootstrap 5 (2021). Depuis, le JavaScript est écrit en modules ES vanilla.
🧠 Quiz de révision
1. En quelle année et chez qui Bootstrap est-il né ?
En 2011, chez Twitter (initialement « Twitter Blueprint »).
2. Bootstrap gère-t-il l’état applicatif comme React ?
Non. C’est un framework CSS/JS de présentation, pas un framework applicatif.
3. Quels sont les deux moyens de personnaliser Bootstrap ?
Recompiler le Sass (variables/maps) et surcharger les variables CSS (--bs-*) à la volée.
4. Quel apport majeur de la 5.3 ?
Les color modes (dark mode natif via data-bs-theme) et une palette étendue.
5. Sur quelle techno CSS repose la grille depuis la v4 ?
Flexbox (avant, c’était des float).
Chapitre suivant : 1.2 — Quand (ne pas) utiliser Bootstrap