Journal
Frontend Bootstrap 5

Bootstrap 5 : ce qu'il faut maîtriser au-delà des bases

Journal du dimanche 16 août 2026, généré le 23 août à 18:57

La fin de jQuery et ce que ça change

Depuis la version 5, Bootstrap ne dépend plus de jQuery : tous les composants interactifs (modales, dropdowns, tooltips, carrousels) sont pilotés en JavaScript natif. Concrètement, cela signifie que l'instanciation et le contrôle programmatique passent par des classes JS exposées globalement.

const modalEl = document.getElementById('myModal');
const modal = new bootstrap.Modal(modalEl, {
  backdrop: 'static',
  keyboard: false
});
modal.show();

Si votre code legacy manipulait des composants via $('#myModal').modal('show'), il faut le migrer vers cette API. C'est aussi l'occasion de vérifier que Popper.js (utilisé par les dropdowns et tooltips) est bien chargé, car il n'est plus inclus dans le bundle jQuery historique mais dans bootstrap.bundle.min.js.

Les variables CSS comme véritable système de theming

Depuis 5.2-5.3, Bootstrap expose la quasi-totalité de ses valeurs via des custom properties CSS (--bs-*), en plus des variables Sass. Cela permet de retheme certains composants sans recompiler tout le CSS.

.card {
  --bs-card-border-color: #6c5ce7;
  --bs-card-cap-bg: #f4f1ff;
}

C'est particulièrement utile pour du theming dynamique côté client (changement de thème en JS pur, sans rebuild).

Les color modes (dark mode natif)

Bootstrap 5.3 introduit un système de modes de couleur intégré, activable via un attribut sur la racine du document :

<html data-bs-theme="dark">

Chaque composant redéfinit ses variables --bs-* selon ce mode. Vous pouvez aussi surcharger le thème localement sur un conteneur précis en posant data-bs-theme="light" sur un élément enfant, ce qui permet de mixer les modes dans une même page.

La Sass Utility API

Plutôt que d'écrire du CSS custom pour des classes utilitaires manquantes, l'Utility API permet de générer ou modifier des classes directement depuis la configuration Sass.

$utilities: map-merge($utilities, (
  "cursor": (
    property: cursor,
    values: pointer grab not-allowed
  )
));

Cela génère automatiquement .cursor-pointer, .cursor-grab, etc., avec support des breakpoints responsives si vous l'activez via responsive: true.

Points de rupture et grille

Le breakpoint xxl (≥ 1400px) est disponible nativement, et les gutters de la grille sont désormais gérés en variables CSS (--bs-gutter-x), ce qui facilite leur ajustement par composant sans surcharger tout le système de grille.

À vérifier lors d'un audit de migration

  • Suppression du support IE11 : vérifiez vos polyfills devenus inutiles.
  • Renommage de nombreux attributs data-* en data-bs-* pour éviter les collisions.
  • Formulaires : les classes .form-row et .form-group ont disparu au profit de la grille standard et des classes utilitaires d'espacement.