Bootstrap 5 : le cours complet

🧭Introduction à Bootstrap

Concept. Bootstrap est une bibliothèque CSS (et JS) de composants et d'utilitaires prêts à l'emploi : on assemble une interface avec des classes au lieu de tout écrire en CSS. Analogie : des briques Lego déjà moulées.

Année	Version	Apport clé
2011	1 (Twitter)	Création par Mark Otto et Jacob Thornton
2013	3	Mobile first
2018	4	Flexbox
2021	5	Sans jQuery, utilitaires, RTL
2023	5.3	Mode sombre (color modes)

Bootstrap 4 vs 5

Sujet	BS4	BS5
jQuery	requis	supprimé
Attributs JS	`data-toggle`	`data-bs-toggle`
Marges	`ml-3 mr-3`	`ms-3 me-3`
Breakpoints	xs à xl	+ xxl
Formulaires	`form-group`	`mb-3`, `form-select`

Bootstrap, CSS classique, Tailwind

	CSS classique	Bootstrap	Tailwind
Philosophie	tout écrire	composants prêts	utilitaires seulement
Vitesse de départ	lente	très rapide	rapide
Identité visuelle	totale	à personnaliser	totale
Idéal pour	sites uniques	dashboards, prototypes, back-offices	design sur mesure

💡 Pro Tip : débutant, commencez par Bootstrap (CDN). Projet professionnel : Bootstrap via npm/Sass avec personnalisation des variables.

📌 À retenir : Bootstrap accélère le développement, mais ne remplace pas la compréhension du CSS.

⚙️Installation et configuration

CDN (débutant) : deux lignes, aucune installation.

NPM + Vite (professionnel) : versions figées, import sélectif, Sass possible.

📌 À retenir : CDN pour apprendre, npm + Vite pour un vrai projet. Le bundle inclut Popper.

🧱Le système de Grid

Concept. Une ligne (row) = 12 colonnes. Une colonne occupe de 1 à 12 parts. container a une largeur max par breakpoint ; container-fluid prend 100 %.

⚠️ Attention : toujours container > row > col. Si la somme dépasse 12, la colonne passe à la ligne.

📌 À retenir : 12 colonnes ; col-md-6 = 6/12 à partir de md, 12/12 en dessous.

📱Responsive design et breakpoints

Nom	Préfixe	À partir de	Container max
xs	(aucun)	< 576 px	100 %
sm	`-sm-`	576 px	540 px
md	`-md-`	768 px	720 px
lg	`-lg-`	992 px	960 px
xl	`-xl-`	1200 px	1140 px
xxl	`-xxl-`	1400 px	1320 px

Mobile first : on écrit d'abord pour le téléphone, puis on enrichit avec md, lg…

📌 À retenir : Un préfixe s’applique à partir de sa largeur, vers le haut.

🔤Typographie, couleurs et arrière-plans

Titres h1-h6, display-1…6, lead, alignement text-center, poids fw-bold, casse text-uppercase, coupure text-truncate, couleurs text-* et fonds bg-*.

💡 Gardez une cohérence : primary = action principale, success = validation, danger = suppression.

📌 À retenir : Les classes text-* et bg-* portent un sens (sémantique), pas seulement une couleur.

📏Spacing (marges, paddings, gap)

Notation : {propriété}{côté}-{taille}. Propriété : m (margin), p (padding). Côtés : t b s e x y (s = début, e = fin). Tailles : 0-5 et auto. Responsive : p-md-5. Entre enfants flex/grid : gap-3.

📌 À retenir : Échelle 0 à 5 (0, .25, .5, 1, 1.5, 3 rem). ms/me remplacent ml/mr.

🔘Boutons et icônes

Variantes btn-primary…, contours btn-outline-*, tailles btn-lg / btn-sm, disabled, groupes btn-group, icônes avec Bootstrap Icons (<i class="bi bi-house">).

Icônes utiles : bi-speedometer2 dashboard · bi-person user · bi-gear settings · bi-search · bi-pencil edit · bi-trash delete · bi-house home · bi-box-arrow-right logout. Lien CSS : bootstrap-icons@1.11.3/font/bootstrap-icons.min.css.

📌 À retenir : Un bouton = btn + une variante.

🃏Cards

Une card = card > card-body > card-title / card-text. Elle sert de produit, profil, cours, blog, tarif ou statistique de dashboard.

📌 À retenir : h-100 aligne la hauteur des cartes d’une même ligne.

🧭Navbar

Le bouton hamburger (navbar-toggler) déclenche le plugin collapse via data-bs-toggle et data-bs-target : en dessous du breakpoint navbar-expand-lg, le menu se replie. Variantes : navbar-dark bg-dark, sticky-top, fixed-top.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><i class="bi bi-mortarboard"></i> EduApp</a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nv"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="nv">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Accueil</a></li>
        <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Cours</a>
          <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">HTML</a></li><li><a class="dropdown-item" href="#">CSS</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Tout voir</a></li></ul></li>
      </ul>
      <form class="d-flex"><input class="form-control me-2" placeholder="Rechercher"><button class="btn btn-outline-light">OK</button></form>
    </div>
  </div>
</nav>

📌 À retenir : navbar-expand-* choisit à partir de quand le menu est déplié.

📝Formulaires et validation

Champs : form-control, form-select, form-check, form-switch, input-group, form-floating. Validation : needs-validation novalidate + classe was-validated ajoutée au submit. Essayez d'envoyer le formulaire vide.

<form class="needs-validation row g-3" novalidate>
  <div class="col-md-6 form-floating"><input class="form-control" id="fn" placeholder="Prénom" required><label for="fn">Prénom</label><div class="invalid-feedback">Prénom requis.</div></div>
  <div class="col-md-6 form-floating"><input class="form-control" id="ln" placeholder="Nom" required><label for="ln">Nom</label><div class="invalid-feedback">Nom requis.</div></div>
  <div class="col-12"><div class="input-group"><span class="input-group-text">@</span><input type="email" class="form-control" placeholder="E-mail" required><div class="invalid-feedback">E-mail valide requis.</div></div></div>
  <div class="col-md-6"><input type="password" class="form-control" placeholder="Mot de passe" minlength="6" required></div>
  <div class="col-md-6"><input type="password" class="form-control" placeholder="Confirmer" required></div>
  <div class="col-md-6"><select class="form-select" required><option value="">Pays…</option><option>Tunisie</option><option>France</option></select></div>
  <div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" id="t" required><label class="form-check-label" for="t">J'accepte les conditions</label></div></div>
  <div class="col-12"><button class="btn btn-primary">Créer mon compte</button></div>
</form>
<script>
document.querySelector(".needs-validation").addEventListener("submit", e => {
  const f = e.target;
  if (!f.checkValidity()) { e.preventDefault(); e.stopPropagation(); }
  f.classList.add("was-validated");
});
</script>

📌 À retenir : Validation native du navigateur + styles Bootstrap : pas besoin de JavaScript lourd.

📊Tables

table + table-striped (lignes alternées), table-hover, table-bordered, et table-responsive sur un conteneur pour le défilement horizontal sur mobile.

📌 À retenir : Sans table-responsive, un grand tableau casse la mise en page mobile.

🔔Alerts, badges, progress et spinners

📌 À retenir : alert-* pour informer, progress pour la progression, spinner-* pour l’attente.

🪟Modals

Un bouton avec data-bs-toggle="modal" et data-bs-target="#id" ouvre la fenêtre. data-bs-dismiss="modal" la ferme. Même principe pour confirmation, suppression, login ou détails produit.

📌 À retenir : Le modal est du HTML caché ; le bundle JS gère l’ouverture, le fond et la touche Échap.

🎠Accordion (FAQ) et Carousel

<div class="accordion mb-4" id="faq">
  <div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#a1">Bootstrap est-il gratuit ?</button></h2><div id="a1" class="accordion-collapse collapse show" data-bs-parent="#faq"><div class="accordion-body">Oui, open source (licence MIT).</div></div></div>
  <div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#a2">Faut-il jQuery ?</button></h2><div id="a2" class="accordion-collapse collapse" data-bs-parent="#faq"><div class="accordion-body">Non, depuis Bootstrap 5.</div></div></div>
</div>
<div id="car" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators"><button data-bs-target="#car" data-bs-slide-to="0" class="active"></button><button data-bs-target="#car" data-bs-slide-to="1"></button></div>
  <div class="carousel-inner rounded">
    <div class="carousel-item active"><div class="d-flex align-items-center justify-content-center text-white" style="height:170px;background:#7952b3">Image placeholder 1</div><div class="carousel-caption"><h5>Slide 1</h5></div></div>
    <div class="carousel-item"><div class="d-flex align-items-center justify-content-center text-white" style="height:170px;background:#0d6efd">Image placeholder 2</div><div class="carousel-caption"><h5>Slide 2</h5></div></div>
  </div>
  <button class="carousel-control-prev" data-bs-target="#car" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button>
  <button class="carousel-control-next" data-bs-target="#car" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>
</div>

Remplacez les placeholders par des <img class="d-block w-100" alt="…"> libres de droits (Unsplash).

📌 À retenir : data-bs-parent force un seul panneau ouvert à la fois.

📐Utilities et Flexbox

Flex : d-flex, flex-row/column, justify-content-start|center|between|end (axe principal), align-items-* (axe transversal), flex-wrap, gap-*.

Catégorie	Classes
Display	`d-none d-md-block`
Position	`position-relative absolute fixed-top sticky-top`
Ombres / bordures	`shadow-sm border border-2 rounded-3 rounded-circle`
Taille	`w-50 w-100 h-100 vh-100`
Divers	`overflow-hidden opacity-50 invisible`

📌 À retenir : Les utilitaires remplacent la majorité du CSS « de dépannage » : moins de fichiers, plus de vitesse.

⚡Bootstrap et JavaScript

Composant	Déclencheur HTML
Modal	`data-bs-toggle="modal"`
Dropdown	`data-bs-toggle="dropdown"`
Collapse / Accordion	`data-bs-toggle="collapse"`
Carousel	`data-bs-ride`, `data-bs-slide`
Tooltip / Popover	à initialiser en JS (Popper)
Toast	JS : `new bootstrap.Toast(el).show()`
Offcanvas	`data-bs-toggle="offcanvas"`

bootstrap.bundle.min.js = Bootstrap JS + Popper (positionnement des menus, tooltips, popovers). Sans lui : pas de burger, de modal ni de dropdown.

📌 À retenir : Charger le bundle avant la fin du body.

✨Animations

Principe : transitions (transition), transformations (transform) et @keyframes, en complément des classes Bootstrap (fade, progress-bar-animated, spinner-border).

💡 Animations courtes (150-400 ms), utiles, et désactivées avec prefers-reduced-motion.

📌 À retenir : Animer pour guider l’œil, pas pour décorer.

🎓Projet final : Student Management Dashboard

Sidebar, navbar, cartes de statistiques, table avec recherche et filtre, modal d'ajout, suppression avec confirmation, alerte, progress, footer, responsive (sidebar masquée sous md).

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Student Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>
<div class="d-flex">
  <aside class="sidebar bg-dark text-white p-3 d-none d-md-block">
    <h5><i class="bi bi-mortarboard"></i> EduAdmin</h5>
    <ul class="nav flex-column">
      <li><a class="nav-link text-white" href="#"><i class="bi bi-speedometer2"></i> Dashboard</a></li>
      <li><a class="nav-link text-white" href="#"><i class="bi bi-people"></i> Étudiants</a></li>
      <li><a class="nav-link text-white" href="#"><i class="bi bi-gear"></i> Paramètres</a></li>
    </ul>
  </aside>
  <div class="flex-grow-1">
    <nav class="navbar bg-white shadow-sm px-3"><span class="navbar-brand mb-0 h1">Dashboard</span><span class="text-muted">Prof. Mezni</span></nav>
    <main class="p-3">
      <div class="row g-3 mb-3">
        <div class="col-6 col-lg-3"><div class="card stat"><div class="card-body"><small class="text-muted">Étudiants</small><h3 id="total">3</h3></div></div></div>
        <div class="col-6 col-lg-3"><div class="card stat"><div class="card-body"><small class="text-muted">Cours</small><h3>5</h3></div></div></div>
        <div class="col-12 col-lg-6"><div class="card stat"><div class="card-body"><small class="text-muted">Réussite</small><div class="progress mt-2"><div class="progress-bar bg-success" style="width:82%">82 %</div></div></div></div></div>
      </div>
      <div class="alert alert-success d-none" id="msg"></div>
      <div class="card"><div class="card-body">
        <div class="d-flex flex-wrap gap-2 mb-3">
          <input id="search" class="form-control w-auto" placeholder="Rechercher…">
          <select id="filter" class="form-select w-auto"><option value="">Tous</option><option>Actif</option><option>Inactif</option></select>
          <button class="btn btn-primary ms-auto" data-bs-toggle="modal" data-bs-target="#addModal"><i class="bi bi-plus-lg"></i> Ajouter</button>
        </div>
        <div class="table-responsive"><table class="table table-hover align-middle">
          <thead><tr><th>Nom</th><th>Cours</th><th>Statut</th><th>Actions</th></tr></thead>
          <tbody id="rows">
            <tr><td>Sara Ben Ali</td><td>HTML/CSS</td><td><span class="badge bg-success">Actif</span></td><td><button class="btn btn-sm btn-outline-danger del"><i class="bi bi-trash"></i></button></td></tr>
            <tr><td>Ali Trabelsi</td><td>JavaScript</td><td><span class="badge bg-secondary">Inactif</span></td><td><button class="btn btn-sm btn-outline-danger del"><i class="bi bi-trash"></i></button></td></tr>
            <tr><td>Nour Gharbi</td><td>Bootstrap</td><td><span class="badge bg-success">Actif</span></td><td><button class="btn btn-sm btn-outline-danger del"><i class="bi bi-trash"></i></button></td></tr>
          </tbody>
        </table></div>
      </div></div>
    </main>
    <footer class="text-center text-muted py-3">© 2026 EduAdmin</footer>
  </div>
</div>
<div class="modal fade" id="addModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content">
  <div class="modal-header"><h5 class="modal-title">Ajouter un étudiant</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
  <div class="modal-body"><input id="newName" class="form-control mb-2" placeholder="Nom"><input id="newCourse" class="form-control" placeholder="Cours"></div>
  <div class="modal-footer"><button class="btn btn-primary" id="save" data-bs-dismiss="modal">Enregistrer</button></div>
</div></div></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>

const rows = document.getElementById("rows");
const msg = document.getElementById("msg");

function notify(text) {
  msg.textContent = text;
  msg.classList.remove("d-none");
  setTimeout(() => msg.classList.add("d-none"), 2500);
}

function applyFilter() {
  const q = document.getElementById("search").value.toLowerCase();
  const f = document.getElementById("filter").value;
  rows.querySelectorAll("tr").forEach(tr => {
    const okText = tr.textContent.toLowerCase().includes(q);
    const okStatus = !f || tr.textContent.includes(f);
    tr.classList.toggle("d-none", !(okText && okStatus));
  });
}

document.getElementById("search").addEventListener("input", applyFilter);
document.getElementById("filter").addEventListener("change", applyFilter);

rows.addEventListener("click", e => {
  const btn = e.target.closest(".del");
  if (btn && confirm("Supprimer cet étudiant ?")) {
    btn.closest("tr").remove();
    notify("Étudiant supprimé.");
  }
});

💡 Améliorations : modal « Modifier » (exercice), validation du formulaire, sauvegarde dans localStorage, puis branchement sur une API REST.

📌 À retenir : Séparez toujours structure (HTML), style (CSS) et comportement (JS).

🌐Bootstrap dans un projet Full Stack

Stack	Rôle de Bootstrap
Node + Express	Vues (EJS) ou fichiers statiques servis par `express.static`
React	Package `react-bootstrap` (composants sans jQuery)
Laravel	Vues Blade, intégration via Vite
ASP.NET	Inclus dans les templates MVC/Razor
Base de données	Aucun lien direct : Bootstrap affiche les données reçues de l’API

📌 À retenir : Bootstrap est uniquement la couche présentation : aucun rôle côté serveur ou base de données.

✅Bonnes pratiques et erreurs fréquentes

Évitez le CSS inline, créez des composants réutilisables, pensez accessibilité (alt, aria-label, contrastes), performance (CSS minifié, import sélectif via npm) et hiérarchie visuelle claire. Ne copiez jamais du Bootstrap sans comprendre le CSS sous-jacent.

📋Cheat Sheet

🏋️Exercices

🧠Quiz (20 questions)

Cliquez sur une réponse : vert = bonne, rouge = erreur.

0 / 0 (sur 20)

Voir toutes les réponses