🚀 Installation Bootstrap 5
<!-- CDN CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
      rel="stylesheet" 
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 
      crossorigin="anonymous">

<!-- CDN JavaScript Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 
        crossorigin="anonymous"></script>

<!-- Structure HTML de base -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5</title>
    <!-- CSS Bootstrap -->
</head>
<body>
    <!-- Contenu -->
    <!-- JS Bootstrap -->
</body>
</html>
📐 Système de Grille
<!-- CONTENEURS -->
<div class="container"></div>              <!-- Largeur fixe responsive -->
<div class="container-fluid"></div>       <!-- Largeur 100% -->
<div class="container-sm"></div>          <!-- 100% jusqu'à sm, puis fixe -->
<div class="container-md"></div>          <!-- 100% jusqu'à md, puis fixe -->
<div class="container-lg"></div>          <!-- 100% jusqu'à lg, puis fixe -->
<div class="container-xl"></div>          <!-- 100% jusqu'à xl, puis fixe -->
<div class="container-xxl"></div>         <!-- 100% jusqu'à xxl, puis fixe -->

<!-- GRILLE DE BASE -->
<div class="container">
    <div class="row">
        <div class="col">Colonne auto</div>
        <div class="col">Colonne auto</div>
        <div class="col">Colonne auto</div>
    </div>
</div>

<!-- COLONNES AVEC TAILLES -->
<div class="row">
    <div class="col-4">4/12</div>
    <div class="col-8">8/12</div>
</div>

<!-- RESPONSIVE BREAKPOINTS -->
<!-- xs (<576px), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px) -->
<div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">Responsive</div>
    <div class="col-12 col-sm-6 col-md-8 col-lg-9">Responsive</div>
</div>

<!-- OFFSET ET ALIGNEMENT -->
<div class="row">
    <div class="col-md-4 offset-md-4">Centré avec offset</div>
</div>

<div class="row justify-content-center">   <!-- start | center | end | around | between | evenly -->
    <div class="col-md-6">Centré</div>
</div>

<div class="row align-items-center">       <!-- start | center | end | baseline | stretch -->
    <div class="col">Aligné verticalement</div>
</div>

<!-- ORDRE DES COLONNES -->
<div class="row">
    <div class="col order-2">Premier dans le HTML, deuxième visuellement</div>
    <div class="col order-1">Deuxième dans le HTML, premier visuellement</div>
</div>
📦 Espacement (Spacing)
<!-- MARGES (m) ET PADDING (p) -->
<!-- Format: {propriété}{côtés}-{taille} -->
<!-- Propriétés: m (margin), p (padding) -->
<!-- Côtés: t (top), b (bottom), s (start/left), e (end/right), x (horizontal), y (vertical), vide (tous) -->
<!-- Tailles: 0, 1, 2, 3, 4, 5, auto -->

<!-- MARGES -->
<div class="m-0">Marge 0</div>
<div class="m-1">Marge petite (0.25rem)</div>
<div class="m-2">Marge petite (0.5rem)</div>
<div class="m-3">Marge moyenne (1rem)</div>
<div class="m-4">Marge grande (1.5rem)</div>
<div class="m-5">Marge très grande (3rem)</div>
<div class="m-auto">Marge automatique</div>

<!-- MARGES SPÉCIFIQUES -->
<div class="mt-3">Marge top</div>
<div class="mb-3">Marge bottom</div>
<div class="ms-3">Marge start (gauche)</div>
<div class="me-3">Marge end (droite)</div>
<div class="mx-3">Marge horizontale</div>
<div class="my-3">Marge verticale</div>

<!-- PADDING -->
<div class="p-0">Padding 0</div>
<div class="p-3">Padding moyen</div>
<div class="pt-2 pb-4">Padding top et bottom différents</div>
<div class="px-5">Padding horizontal</div>
<div class="py-2">Padding vertical</div>

<!-- MARGES NÉGATIVES -->
<div class="mt-n3">Marge top négative</div>
<div class="ms-n2">Marge start négative</div>

<!-- RESPONSIVE SPACING -->
<div class="m-2 m-md-4 m-lg-5">Marges responsive</div>
<div class="p-1 p-sm-2 p-md-3">Padding responsive</div>
🎨 Couleurs et Arrière-plans
<!-- COULEURS DE TEXTE -->
<p class="text-primary">Texte primaire</p>
<p class="text-secondary">Texte secondaire</p>
<p class="text-success">Texte succès</p>
<p class="text-danger">Texte danger</p>
<p class="text-warning">Texte warning</p>
<p class="text-info">Texte info</p>
<p class="text-light">Texte clair</p>
<p class="text-dark">Texte sombre</p>
<p class="text-muted">Texte discret</p>
<p class="text-white">Texte blanc</p>
<p class="text-black">Texte noir</p>

<!-- ARRIÈRE-PLANS -->
<div class="bg-primary">Arrière-plan primaire</div>
<div class="bg-secondary">Arrière-plan secondaire</div>
<div class="bg-success">Arrière-plan succès</div>
<div class="bg-danger">Arrière-plan danger</div>
<div class="bg-warning">Arrière-plan warning</div>
<div class="bg-info">Arrière-plan info</div>
<div class="bg-light">Arrière-plan clair</div>
<div class="bg-dark">Arrière-plan sombre</div>
<div class="bg-white">Arrière-plan blanc</div>
<div class="bg-transparent">Arrière-plan transparent</div>

<!-- DÉGRADÉS -->
<div class="bg-primary bg-gradient">Dégradé primaire</div>
<div class="bg-success bg-gradient">Dégradé succès</div>

<!-- OPACITÉ -->
<div class="bg-primary bg-opacity-75">Opacité 75%</div>  <!-- 10, 25, 50, 75 -->
<div class="text-primary text-opacity-50">Texte 50% opaque</div>
📝 Typographie
<!-- TAILLES DE TITRE -->
<h1 class="display-1">Display 1</h1>        <!-- Plus grand -->
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>        <!-- Plus petit -->

<!-- TAILLES DE TEXTE -->
<p class="fs-1">Font size 1 (plus grand)</p>
<p class="fs-2">Font size 2</p>
<p class="fs-3">Font size 3</p>
<p class="fs-4">Font size 4</p>
<p class="fs-5">Font size 5</p>
<p class="fs-6">Font size 6 (plus petit)</p>

<!-- POIDS DE POLICE -->
<p class="fw-bold">Gras</p>
<p class="fw-bolder">Plus gras</p>
<p class="fw-semibold">Semi-gras</p>
<p class="fw-medium">Moyen</p>
<p class="fw-normal">Normal</p>
<p class="fw-light">Léger</p>
<p class="fw-lighter">Plus léger</p>

<!-- STYLE DE POLICE -->
<p class="fst-italic">Italique</p>
<p class="fst-normal">Normal</p>

<!-- ALIGNEMENT DE TEXTE -->
<p class="text-start">Aligné à gauche</p>
<p class="text-center">Centré</p>
<p class="text-end">Aligné à droite</p>
<p class="text-justify">Justifié</p>

<!-- TRANSFORMATION DE TEXTE -->
<p class="text-lowercase">MINUSCULES</p>
<p class="text-uppercase">majuscules</p>
<p class="text-capitalize">première lettre</p>

<!-- DÉCORATION DE TEXTE -->
<p class="text-decoration-none">Pas de décoration</p>
<p class="text-decoration-underline">Souligné</p>
<p class="text-decoration-line-through">Barré</p>

<!-- ESPACEMENT DE LETTRES -->
<p class="text-nowrap">Texte sans retour à la ligne</p>
<p class="text-break">Texte avec coupure de mots très longs</p>
<p class="text-truncate">Texte tronqué avec ellipse...</p>

<!-- LEAD ET SMALL -->
<p class="lead">Paragraphe d'introduction en évidence</p>
<small class="text-muted">Petit texte discret</small>
🔲 Boutons
<!-- BOUTONS DE BASE -->
<button type="button" class="btn btn-primary">Primaire</button>
<button type="button" class="btn btn-secondary">Secondaire</button>
<button type="button" class="btn btn-success">Succès</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Clair</button>
<button type="button" class="btn btn-dark">Sombre</button>
<button type="button" class="btn btn-link">Lien</button>

<!-- BOUTONS OUTLINE -->
<button type="button" class="btn btn-outline-primary">Primaire outline</button>
<button type="button" class="btn btn-outline-secondary">Secondaire outline</button>
<button type="button" class="btn btn-outline-success">Succès outline</button>

<!-- TAILLES DE BOUTONS -->
<button class="btn btn-primary btn-lg">Grand bouton</button>
<button class="btn btn-primary">Bouton normal</button>
<button class="btn btn-primary btn-sm">Petit bouton</button>

<!-- ÉTATS DE BOUTONS -->
<button class="btn btn-primary" disabled>Bouton désactivé</button>
<button class="btn btn-primary active">Bouton actif</button>

<!-- GROUPE DE BOUTONS -->
<div class="btn-group" role="group">
    <button type="button" class="btn btn-primary">Gauche</button>
    <button type="button" class="btn btn-primary">Milieu</button>
    <button type="button" class="btn btn-primary">Droite</button>
</div>

<!-- BOUTON TOGGLE -->
<button type="button" class="btn btn-primary" data-bs-toggle="button">
    Toggle button
</button>

<!-- BOUTON AVEC DROPDOWN -->
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" 
            data-bs-toggle="dropdown">
        Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Autre action</a></li>
    </ul>
</div>
📋 Formulaires
<!-- FORMULAIRE DE BASE -->
<form>
    <div class="mb-3">
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control" id="email">
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Mot de passe</label>
        <input type="password" class="form-control" id="password">
    </div>
    <button type="submit" class="btn btn-primary">Envoyer</button>
</form>

<!-- TAILLES D'INPUT -->
<input class="form-control form-control-lg" type="text" placeholder="Grand input">
<input class="form-control" type="text" placeholder="Input normal">
<input class="form-control form-control-sm" type="text" placeholder="Petit input">

<!-- INPUT READONLY ET DISABLED -->
<input class="form-control" type="text" value="Lecture seule" readonly>
<input class="form-control" type="text" value="Désactivé" disabled>

<!-- TEXTAREA -->
<div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" rows="3"></textarea>
</div>

<!-- SELECT -->
<div class="mb-3">
    <label for="country" class="form-label">Pays</label>
    <select class="form-select" id="country">
        <option selected>Choisir...</option>
        <option value="1">France</option>
        <option value="2">Canada</option>
    </select>
</div>

<!-- CHECKBOXES -->
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check1">
    <label class="form-check-label" for="check1">
        Option 1
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check2" checked>
    <label class="form-check-label" for="check2">
        Option 2 (cochée)
    </label>
</div>

<!-- RADIOS -->
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadio" id="radio1">
    <label class="form-check-label" for="radio1">
        Option radio 1
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadio" id="radio2" checked>
    <label class="form-check-label" for="radio2">
        Option radio 2
    </label>
</div>

<!-- SWITCH -->
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switch1">
    <label class="form-check-label" for="switch1">Switch</label>
</div>

<!-- RANGE -->
<div class="mb-3">
    <label for="range" class="form-label">Range</label>
    <input type="range" class="form-range" id="range">
</div>

<!-- INPUT GROUP -->
<div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Nom d'utilisateur">
</div>

<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Montant">
    <span class="input-group-text">€</span>
</div>

<!-- VALIDATION -->
<div class="mb-3">
    <input type="text" class="form-control is-valid" value="Valide">
    <div class="valid-feedback">C'est bon !</div>
</div>

<div class="mb-3">
    <input type="text" class="form-control is-invalid" value="Invalide">
    <div class="invalid-feedback">Veuillez corriger ce champ.</div>
</div>
🧩 Composants
<!-- ALERTE -->
<div class="alert alert-primary" role="alert">
    Alerte primaire !
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    Alerte fermable !
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- BADGE -->
<span class="badge bg-primary">Primaire</span>
<span class="badge bg-secondary">Secondaire</span>
<span class="badge rounded-pill bg-success">Succès pill</span>

<!-- BREADCRUMB -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Accueil</a></li>
        <li class="breadcrumb-item"><a href="#">Section</a></li>
        <li class="breadcrumb-item active">Page actuelle</li>
    </ol>
</nav>

<!-- CARD -->
<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Titre de la carte</h5>
        <p class="card-text">Contenu de la carte.</p>
        <a href="#" class="btn btn-primary">Bouton</a>
    </div>
</div>

<!-- CAROUSEL -->
<div id="carousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

<!-- DROPDOWN -->
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" 
            data-bs-toggle="dropdown">
        Menu déroulant
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Autre action</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Élément séparé</a></li>
    </ul>
</div>

<!-- MODAL -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Ouvrir modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Titre du modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Contenu du modal...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-primary">Sauvegarder</button>
            </div>
        </div>
    </div>
</div>

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Accueil</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Liens</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- PROGRESS BAR -->
<div class="progress">
    <div class="progress-bar" style="width: 25%">25%</div>
</div>

<div class="progress">
    <div class="progress-bar bg-success" style="width: 50%"></div>
</div>

<!-- SPINNER -->
<div class="spinner-border" role="status">
    <span class="visually-hidden">Chargement...</span>
</div>

<div class="spinner-grow text-primary" role="status">
    <span class="visually-hidden">Chargement...</span>
</div>

<!-- TOAST -->
<div class="toast" role="alert">
    <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>Il y a 11 minutes</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
        Message toast !
    </div>
</div>
🔧 Utilitaires
<!-- AFFICHAGE -->
<div class="d-none">Masqué</div>                    <!-- none | inline | inline-block | block | table | table-row | table-cell | flex | inline-flex -->
<div class="d-block">Bloc</div>
<div class="d-inline">En ligne</div>
<div class="d-flex">Flex</div>
<div class="d-none d-md-block">Masqué sur mobile, visible sur md+</div>

<!-- POSITION -->
<div class="position-static">Static</div>          <!-- static | relative | absolute | fixed | sticky -->
<div class="position-relative">Relative</div>
<div class="position-absolute">Absolute</div>
<div class="position-fixed">Fixed</div>
<div class="position-sticky">Sticky</div>

<!-- PLACEMENT -->
<div class="position-relative">
    <div class="position-absolute top-0 start-0">Top Start</div>     <!-- top | bottom -->
    <div class="position-absolute top-0 end-0">Top End</div>       <!-- start | end -->
    <div class="position-absolute bottom-50 start-50 translate-middle">Centré</div>
</div>

<!-- FLEXBOX -->
<div class="d-flex justify-content-center">          <!-- start | end | center | between | around | evenly -->
    <div>Centré horizontalement</div>
</div>

<div class="d-flex align-items-center">              <!-- start | end | center | baseline | stretch -->
    <div>Centré verticalement</div>
</div>

<div class="d-flex flex-column">                     <!-- row | row-reverse | column | column-reverse -->
    <div>Premier</div>
    <div>Deuxième</div>
</div>

<div class="d-flex flex-wrap">                       <!-- nowrap | wrap | wrap-reverse -->
    <div class="flex-fill">Remplit l'espace</div>
    <div class="flex-grow-1">Grandit</div>
    <div class="flex-shrink-1">Rétrécit</div>
</div>

<!-- FLOAT -->
<div class="float-start">Float gauche</div>         <!-- start | end | none -->
<div class="float-end">Float droite</div>
<div class="clearfix"></div>

<!-- OVERFLOW -->
<div class="overflow-auto">Scroll auto</div>        <!-- auto | hidden | visible | scroll -->
<div class="overflow-hidden">Masqué</div>
<div class="text-truncate">Texte tronqué...</div>

<!-- OMBRES -->
<div class="shadow-none">Pas d'ombre</div>
<div class="shadow-sm">Ombre petite</div>
<div class="shadow">Ombre normale</div>
<div class="shadow-lg">Ombre grande</div>

<!-- BORDURES -->
<div class="border">Bordure complète</div>
<div class="border-top">Bordure haut</div>          <!-- top | bottom | start | end -->
<div class="border-0">Pas de bordure</div>
<div class="border-primary">Bordure primaire</div>
<div class="rounded">Coins arrondis</div>
<div class="rounded-circle">Cercle</div>
<div class="rounded-pill">Pilule</div>

<!-- LARGEUR ET HAUTEUR -->
<div class="w-25">Largeur 25%</div>                 <!-- 25 | 50 | 75 | 100 | auto -->
<div class="h-50">Hauteur 50%</div>                 <!-- 25 | 50 | 75 | 100 | auto -->
<div class="mw-100">Max width 100%</div>
<div class="mh-100">Max height 100%</div>

<!-- VERTICAL ALIGN -->
<span class="align-baseline">Baseline</span>        <!-- baseline | top | middle | bottom | text-bottom | text-top -->
<span class="align-top">Top</span>
<span class="align-middle">Middle</span>
<span class="align-bottom">Bottom</span>

<!-- ACCESSIBILITÉ -->
<span class="visually-hidden">Masqué visuellement mais accessible</span>
<div class="visually-hidden-focusable">Visible au focus</div>