🅱️ Bootstrap 5.3 — La documentation complète (Débutant → Expert)

Cours exhaustif en français pour maîtriser Bootstrap 5.3, écrit pour un développeur web Next.js / React qui veut aller de zéro à expert — grille, composants, Sass, color modes, JavaScript, intégration React, mise en production. Avec un quiz de 1000 questions pour s’exercer.

Version couverte : Bootstrap 5.3 (dernière ligne stable — 5.3.8, août 2025). Fonctionnalités clés de la 5.3 : color modes / dark mode natif (data-bs-theme), architecture CSS custom properties complète, palette de couleurs étendue, support RTL officiel, JavaScript sans jQuery. Bootstrap 6 est en développement actif (« reset conceptuel ») : un chapitre lui est consacré (Partie 13).

Comment utiliser ce cours

• Vous débutez en Bootstrap → commencez par la Partie 1, puis 2 (grille) et 3 (contenu). Aucun prérequis autre que HTML/CSS de base.
• Vous voulez construire des interfaces vite → Partie 4 et 5 (composants), 6 (formulaires), 7 (utilitaires).
• Vous voulez un design sur-mesure → Partie 8 (Sass) et 9 (color modes).
• Vous êtes dev React / Next.js → Partie 10 (le JS de Bootstrap et ses pièges avec le SSR) puis Partie 11 (react-bootstrap, App Router).
• Vous voulez vous tester → Partie 15 — Quiz (1000 questions).

Chaque partie est un dossier ; chaque chapitre suit le même format (détail dans Conventions) : ⏱️ TL;DR, 🎯 objectifs, corps détaillé avec diagrammes, code copiable, ✏️ exercices corrigés et 🧠 quiz de révision.

💡 Pour un dev React — Vous connaissez Tailwind ? Bootstrap est l’autre grande école : au lieu d’un flux d’utilitaires atomiques, il vous donne des composants prêts (.btn, .card, .modal) plus une couche d’utilitaires. Ce cours pointe systématiquement les ponts et les différences avec ce que vous connaissez déjà.

Table des matières

Partie 1 — Découvrir Bootstrap

Qu’est-ce que Bootstrap, son histoire, quand l’utiliser (vs Tailwind / CSS pur), installation (CDN vs npm), structure des fichiers, votre première page.

Partie 2 — Mise en page : grille & layout

Le système container/row/col, les breakpoints, les 12 colonnes, les gouttières (gutters), le layout Flex, les colonnes CSS, le z-index.

Partie 3 — Contenu & typographie

Reboot, typographie, images responsives, tableaux, figures — les fondations sur lesquelles reposent tous les composants.

Partie 4 — Composants essentiels

Boutons, badges, alertes, cartes, groupes de boutons, list group, spinners, close button, progress, placeholders.

Partie 5 — Navigation & overlays

Navbar, nav & tabs, breadcrumb, pagination, dropdowns, modal, offcanvas, toasts, tooltips, popovers, collapse, accordion, carousel, scrollspy.

Partie 6 — Formulaires

Form controls, select, checks/radios/switches, range, input group, floating labels, form layout, validation (native + Bootstrap).

Partie 7 — Utilitaires & Utility API

Spacing, couleurs, display, flex, text, borders, sizing, position… et l’Utility API pour générer vos propres classes.

Partie 8 — Personnalisation avec Sass

Importer Bootstrap en Sass, variables, maps, functions, mixins, options $enable-*, CSS variables, build sur-mesure minimal.

Partie 9 — Color modes & dark mode

data-bs-theme, dark mode natif, créer ses propres thèmes de couleur, piloter le mode en JavaScript.

Partie 10 — Le JavaScript de Bootstrap

Data API vs API programmatique, événements, bundle vs plugins individuels, Popper, le monde sans jQuery.

Partie 11 — Bootstrap avec React & Next.js

Pourquoi le JS data-attributes casse avec le SSR, react-bootstrap, intégration App Router, quand (ne pas) choisir Bootstrap dans un projet React.

Partie 12 — Accessibilité & RTL

Ce que Bootstrap fait pour vous (et ce qu’il ne fait pas), ARIA, focus, contrastes, support droite-à-gauche.

Partie 13 — Optimisation & mise en production

Réduire le poids CSS/JS, purge, tree-shaking, CDN, Bootstrap Icons, et l’horizon Bootstrap 6.

Partie 14 — Projets guidés

Six projets du niveau 0 au niveau 5 : landing page, dashboard admin, formulaire multi-étapes, thème sur-mesure, portfolio, intégration Next.js.

Partie 15 — Quiz (1000 questions)

1000 questions à réponse repliable, réparties en 20 quiz thématiques et progressifs, pour ancrer chaque notion.

Parcours recommandé (dev → expert Bootstrap)

Cours rédigé en juillet 2026, basé sur Bootstrap 5.3 (5.3.8). Sources principales : getbootstrap.com , le dépôt twbs/bootstrap .