Les variables CSS remplacent (en partie) Sass
Depuis la version 5.2, Bootstrap expose l'essentiel de son design system via des variables CSS natives préfixées --bs-, générées à partir des variables Sass. Cela permet de surcharger des couleurs ou des espacements directement en CSS, sans recompiler quoi que ce soit.
.card {
--bs-card-border-color: #6366f1;
--bs-card-border-radius: 1rem;
}
Chaque composant (carte, bouton, alerte) documente désormais ses propres variables locales dans la page correspondante de la documentation, ce qui évite de deviner les sélecteurs à cibler.
L'API des utilitaires (Utilities API)
Plutôt que d'ajouter des classes ad hoc dans votre CSS, l'Utilities API permet de générer ou d'étendre les classes utilitaires directement depuis Sass, avec la même syntaxe que le cœur du framework.
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
values: auto pointer grab
),
)
);
Résultat : des classes .cursor-pointer ou .cursor-grab cohérentes avec les responsive suffixes (.cursor-pointer-md) sans dupliquer de logique.
Le mode sombre natif (color modes)
Depuis Bootstrap 5.3, plus besoin de bibliothèque tierce pour gérer un thème clair/sombre. Il suffit de poser un attribut sur la racine du document :
<html data-bs-theme="dark">
Tous les composants adaptent automatiquement leurs couleurs via les variables CSS. On peut aussi cibler un conteneur précis avec data-bs-theme="light" pour forcer un sous-arbre dans un thème différent, utile pour une barre de navigation qui reste sombre sur un site clair.
Zéro jQuery, une seule dépendance JS
Bootstrap 5 s'est débarrassé de jQuery : les composants interactifs (modales, tooltips, offcanvas) sont écrits en JavaScript vanilla et ne dépendent plus que de Popper pour le positionnement des éléments flottants. Cela réduit sensiblement le poids du bundle si vous n'avez pas besoin de jQuery ailleurs dans votre stack.
Grille et gutters personnalisés
Le système de grille reste basé sur Flexbox, mais les gutters (espacements entre colonnes) sont désormais des classes indépendantes, combinables par axe :
<div class="row gx-2 gy-4">
...
</div>
gx-* contrôle l'espacement horizontal, gy-* le vertical — pratique pour des grilles de cartes où l'on veut plus d'air verticalement que latéralement.