Fini jQuery, place au JavaScript natif
Depuis la version 5, Bootstrap ne dépend plus de jQuery : tous les composants (modales, tooltips, dropdowns, carousels) sont pilotés en JavaScript vanilla via des classes ES6. Cela change l'instanciation en JS : on manipule directement les objets exposés sur bootstrap.*.
const modalEl = document.getElementById('myModal');
const modal = new bootstrap.Modal(modalEl, { backdrop: 'static' });
modal.show();
Conséquence pratique : si un ancien projet initialisait des plugins via $('.selector').modal(), cette syntaxe ne fonctionne plus. Il faut soit réécrire ces appels, soit s'appuyer entièrement sur les attributs data-bs-* qui suffisent dans la majorité des cas.
Le préfixe data-bs- et l'abandon d'IE11
Tous les attributs de données sont désormais préfixés data-bs- (par exemple data-bs-toggle="collapse") pour éviter les collisions avec d'autres bibliothèques. C'est un changement mécanique mais facile à oublier lors d'une migration depuis Bootstrap 4. L'abandon du support d'Internet Explorer 11 a aussi permis d'utiliser plus largement les variables CSS personnalisées (--bs-*), ce qui simplifie la surcharge de thème sans recompiler tout le Sass.
Personnaliser une couleur sans recompiler
.btn-primary {
--bs-btn-bg: #6f42c1;
--bs-btn-hover-bg: #5a34a0;
}
L'API d'utilitaires (Utility API)
C'est probablement l'ajout le plus puissant pour un développeur qui personnalise Bootstrap : au lieu d'écraser des classes CSS, on génère ou modifie des classes utilitaires directement depuis Sass.
$utilities: map-merge($utilities, (
"cursor": (
property: cursor,
class: cursor,
values: auto pointer grab
)
));
Cette approche produit des classes comme .cursor-pointer automatiquement, avec les mêmes conventions responsives (cursor-md-pointer, etc.) que le reste du framework.
RFS et grille à 6 niveaux
Le Responsive Font Sizing (RFS) est intégré nativement : les tailles de police et certains espacements s'adaptent automatiquement à la largeur de l'écran sans media queries manuelles. La grille gagne aussi un point de rupture supplémentaire, xxl (≥ 1400px), utile pour les très grands écrans.
Nouveaux composants à ne pas manquer
- Offcanvas : panneau latéral natif, sans plugin tiers.
- Floating labels : libellés de formulaire flottants accessibles sans JS.
- Accordion : remplace l'ancien pattern card + collapse combiné manuellement.
Pour une migration depuis Bootstrap 4, l'outil bootstrap-4-to-5-migration.md officiel liste précisément chaque classe renommée (ml-*/mr-* devenus ms-*/me-* avec le passage au support RTL).