Journal
Frontend Bootstrap 5

Bootstrap 5 : ce qui change vraiment votre façon de coder

Journal du lundi 24 août 2026, généré le 24 août à 09:54

Fini jQuery, place au JavaScript natif

Depuis la version 5, Bootstrap ne dépend plus de jQuery. Tous les composants interactifs (modales, tooltips, offcanvas, carousel...) sont réécrits en JavaScript vanilla. Si vous instanciiez vos composants via $('.modal').modal(), il faut désormais passer par l'API des classes exposées globalement ou en import ES module.

import { Modal } from 'bootstrap';

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

Conséquence pratique : tout code legacy qui manipulait des plugins jQuery-Bootstrap doit être migré, et le bundle final est plus léger si vous n'avez plus besoin de jQuery ailleurs.

L'API Sass pour générer des utilitaires sur mesure

La Utility API permet de définir, modifier ou supprimer des classes utilitaires directement depuis vos variables Sass, sans toucher au CSS source. C'est l'équivalent Bootstrap des plugins de configuration qu'on trouve dans Tailwind.

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

Cela génère automatiquement .cursor-auto, .cursor-pointer, .cursor-grab, avec support responsive si besoin. Utile pour éviter d'écrire du CSS custom pour des besoins mineurs.

Variables CSS natives en complément de Sass

Bootstrap 5 expose désormais un grand nombre de propriétés via des --bs-* custom properties (couleurs, gouttières de grille, rayons de bordure). Cela permet de surcharger un thème au runtime, côté navigateur, sans recompiler Sass :

:root {
  --bs-primary: #6f42c1;
  --bs-border-radius: 0.75rem;
}

Pratique pour du theming dynamique (mode sombre, marque blanche) piloté par JavaScript.

Grille : gouttières nommées et nouveau breakpoint

Le breakpoint xxl (≥1400px) a été ajouté, et les gouttières se contrôlent via des classes g-*, gx-*, gy-* plutôt que des marges négatives fixes.

  • g-0 supprime toute gouttière
  • gx-4 agit uniquement sur l'axe horizontal
  • gy-3 agit uniquement sur l'axe vertical

RFS : le responsive font-sizing activé par défaut

Les titres et certaines classes utilitaires appliquent un fluid scaling automatique via clamp() côté Sass, évitant de multiplier les media queries pour ajuster la taille des titres selon le viewport.

Accessibilité et formulaires

Les composants de formulaire ont été harmonisés (form-select, form-check repensé, form-floating pour les labels flottants), avec un focus renforcé sur les attributs ARIA générés automatiquement par les composants JS, réduisant le travail manuel d'accessibilité.