13.3 — Migration & horizon Bootstrap 6

⏱️ TL;DR — Migrer 4→5 : supprimer jQuery, préfixer les data-attributes data-bs-*, passer aux classes logiques start/end, remplacer .badge-*/.sr-only/.custom-*. Rester dans la 5.x = mises à jour mineures indolores. Bootstrap 6 est annoncé comme un « reset conceptuel » (adoption plus large des features CSS modernes) mais reste en développement — la 5.3 est la cible stable aujourd’hui.

🎯 Objectifs

• Migrer un projet v4 vers v5.
• Suivre les évolutions de la 5.x.
• Situer Bootstrap 6.

Migration 4 → 5 : checklist

1. jQuery : retirez la dépendance ; le JS devient vanilla (voir 10.4).
2. Data-attributes : data-toggle → data-bs-toggle, data-target → data-bs-target, data-dismiss → data-bs-dismiss.
3. Classes logiques : ml/mr → ms/me, pl/pr → ps/pe, text-left/right → text-start/end, float-left/right → float-start/end.
4. Renommages : .badge-primary → .text-bg-primary, .sr-only → .visually-hidden, .no-gutters → .g-0, .custom-control/.custom-select → classes .form-* unifiées.
5. Formulaires : les contrôles custom (custom-*) sont fusionnés dans form-control/form-select/form-check.
6. Utilities : certaines classes déplacées vers l’Utility API ; vérifiez close → btn-close.

Migration 5.0 → 5.3

Indolore, mais profitez-en pour adopter les nouveautés :

• Color modes : data-bs-theme (dark mode natif).
• Couleurs adaptatives : text-body-secondary, bg-body-tertiary, -subtle/-emphasis.
• text-bg-* pour les fonds contrastés.
• Classes z-* (z-index), object-fit-*, progress-stacked.

Bonnes pratiques de mise à jour

• Épinglez la version exacte (bootstrap@5.3.8) et testez avant de bumper.
• Lisez le changelog et le guide de migration officiel.
• Une base bien faite (classes logiques, variables plutôt que surcharges sauvages) rend chaque montée de version triviale.

L’horizon Bootstrap 6

Bootstrap 6 est en développement actif, présenté comme un « reset conceptuel » plutôt qu’une simple évolution. Directions probables (sans garantie tant que ce n’est pas stable) : usage accru des fonctionnalités CSS modernes (container queries, :has(), couches CSS), simplification de l’outillage, poursuite de l’allègement.

Aujourd’hui, la cible stable reste Bootstrap 5.3. Construire proprement en 5.3 (variables, classes logiques, color modes) est le meilleur moyen de préparer une future migration vers la 6.

⚠️ Piège — Migrer 4→5 sans toucher aux data-attributes : les composants ne réagissent plus (data-toggle est ignoré en v5). C’est l’étape la plus oubliée. Faites une recherche globale data-toggle / data-target / data-dismiss.

💡 Pour un dev React — Si vous partez d’un projet neuf en 2026, commencez directement en 5.3 avec react-bootstrap et les color modes. Ne visez pas Bootstrap 6 tant qu’il n’est pas stable ; suivez son avancement mais gardez la 5.3 en production.

✏️ Exercices

1. Citez trois changements obligatoires pour migrer un composant interactif v4 → v5.

2. Quelle est la cible stable aujourd’hui, 5.3 ou 6 ?

🧠 Quiz de révision

🎉 Fin de la Partie 13 ! Partie suivante : Partie 14 — Projets guidés