🥾 Bootstrap – Le Guide Ultime (Component-First)

1. C'est quoi Bootstrap ? (Component-First)

Bootstrap est le framework CSS, HTML et JavaScript le plus populaire au monde pour construire des sites web responsive et mobile-first.

Créé à l'origine chez Twitter, il est devenu le "kit de démarrage" (boilerplate) universel. C'est un UI Kit : une collection de composants pré-stylés (Navbars, Buttons, Cards) que vous pouvez assembler.

La Philosophie : "Component-First"

C'est la différence *fondamentale* avec Tailwind CSS.

Approche Bootstrap (Component-First)	Approche Tailwind (Utility-First)
Vous utilisez des classes "sémantiques" qui représentent un composant entier.	Vous n'avez pas de composant. Vous assemblez des "utilitaires" atomiques.
`<button class="btn btn-primary">`	`<button class="bg-blue-500 text-white...">`
Avantage : Extrêmement rapide pour prototyper. Le HTML est "propre".	Avantage : Design 100% customisé. Pas besoin d'écraser du CSS.
Inconvénient : Tous les sites se ressemblent. La personnalisation demande d'écraser (override) le CSS ou de maîtriser Sass.	Inconvénient : Le HTML devient très "verbeux" (long).

2. Installation (CDN vs npm/Sass)

Il y a deux façons principales d'utiliser Bootstrap, de la plus simple (pour les démos) à la plus professionnelle (pour la production).

Méthode 1 : CDN (Facile & Rapide)

C'est la méthode parfaite pour prototyper ou pour un projet simple (ex: page statique). Vous copiez-collez les liens dans votre <head>.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap CDN</title>
    
    <!-- CSS (dans le <head>) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    
    <!-- JS (avant </body>) -->
    <!-- (Nécessaire pour les Dropdowns, Modals...) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Inconvénient : Vous ne pouvez pas personnaliser les couleurs ($primary) ou les polices. Vous êtes "bloqué" avec le look par défaut.

Méthode 2 : npm + Sass (Professionnelle)

C'est la "bonne façon" de faire. Elle vous permet de personnaliser Bootstrap (voir 10.1).

1. Installation (via npm) :

# Installe Bootstrap et Sass (le compilateur)
npm install bootstrap sass

2. Créer votre fichier .scss (ex: style.scss) :

C'est ici que vous importez *uniquement* ce dont vous avez besoin.

/* style.scss */

/* 1. Importer les fonctions et variables de Bootstrap */
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";

/* 2. (Optionnel) Écraser les variables ! */
$primary: #0f172a;
$border-radius: 0;

/* 3. Importer le reste de Bootstrap */
@import "node_modules/bootstrap/scss/bootstrap";

/* 4. (Optionnel) Ajouter votre propre CSS */
.mon-style-custom {
  color: $primary;
}

3. Compiler : Vous utilisez un outil (npm scripts, Webpack, Vite) pour compiler style.scss en style.css.

3. 🚀 Grid System (Le Cœur)

Le Grid System est la "killer feature" de Bootstrap. C'est un système de layout (basé sur Flexbox) qui utilise une grille de 12 colonnes.

Il y a 3 classes (briques) à mémoriser :

Classe	Rôle
`.container`	Le "wrapper" (emballage) qui centre votre contenu. - `.container`: A une largeur fixe (`max-width`) qui change aux breakpoints. - `.container-fluid`: A une largeur de `100%`.
`.row`	La "rangée". C'est un conteneur `display: flex` qui doit contenir les colonnes. Il annule le `padding` du `.container` (via une marge négative).
`.col`	La "colonne". C'est l'enfant direct de `.row`. C'est là que vous mettez votre contenu. La grille est divisée en 12. Donc `.col-4` signifie "prend 4 des 12 colonnes" (soit 33.3%).

Exemple de Grille Simple (3 colonnes égales)

<div class="container">
  <!-- Une rangée -->
  <div class="row">
    
    <!-- 4 + 4 + 4 = 12 colonnes (trois tiers) -->
    <div class="col-4">
      Contenu 1 (33.3%)
    </div>
    <div class="col-4">
      Contenu 2 (33.3%)
    </div>
    <div class="col-4">
      Contenu 3 (33.3%)
    </div>
    
  </div>
  
  <!-- Une autre rangée -->
  <div class="row">
    
    <!-- 8 + 4 = 12 colonnes (deux tiers / un tiers) -->
    <div class="col-8">
      Contenu 4 (66.6%)
    </div>
    <div class="col-4">
      Contenu 5 (33.3%)
    </div>
    
  </div>
</div>

4. 📱 Grid System (Responsive)

C'est là que la magie opère. Bootstrap est "Mobile-First". Les classes de grille (.col-) sont combinées avec des breakpoints (points d'arrêt) pour changer le layout en fonction de la taille de l'écran.

Les Breakpoints

La classe .col- (sans breakpoint) s'applique à *toutes* les tailles (XS et +).
Les classes avec breakpoint (ex: .col-md-) ne s'appliquent qu'à partir de cette taille (min-width) et au-dessus.

Préfixe	Taille (`min-width`)	Appareil Cible
`.col-` (ou `.col-xs-`)	(0px et +)	Mobile (Default)
`.col-sm-`	576px et +	Mobile (Paysage)
`.col-md-`	768px et +	Tablette
`.col-lg-`	992px et +	Laptop
`.col-xl-`	1200px et +	Desktop

Exemple : Le Layout "Stacking" (Empilement)

Objectif : Créer 3 boîtes. Sur mobile, elles doivent prendre 100% de la largeur (s'empiler). Sur tablette, 50% (2 par ligne). Sur desktop, 33.3% (3 par ligne).

<div class="container">
  <div class="row">
    
    <!--
      Analyse de cette ligne :
      - .col-12 : Par défaut (mobile), prend 12/12 (100%)
      - .col-md-6 : A partir de 768px, prend 6/12 (50%)
      - .col-lg-4 : A partir de 992px, prend 4/12 (33.3%)
    -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="p-3 border bg-light">Boîte 1</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="p-3 border bg-light">Boîte 2</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="p-3 border bg-light">Boîte 3</div>
    </div>
    
  </div>
</div>

Sur mobile, les 3 boîtes s'empilent. Sur tablette, la 3e boîte passe à la ligne suivante.

5. Composants (Navbar, Card, Button)

C'est la philosophie "Component-First". Bootstrap fournit des blocs de HTML et CSS pré-stylés (un "UI Kit") que vous copiez-collez.

Button (`.btn`)

<!-- Couleurs sémantiques -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>

<!-- Styles "Outline" -->
<button type="button" class="btn btn-outline-danger">Danger Outline</button>

<!-- Tailles -->
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-secondary btn-sm">Small</button>

Card (`.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 Card</h5>
    <p class="card-text">Un peu de texte pour la card.</p>
    <a href="#" class="btn btn-primary">Voir plus</a>
  </div>
</div>

Navbar (`.navbar`)

C'est le composant le plus complexe. Il gère le responsive (le menu "hamburger") nativement.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MonSite</a>
    
    <!-- Le bouton "Hamburger" (visible sur mobile) -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- 
      Le conteneur "Collapse"
      navbar-expand-lg = "Étends-toi (soit visible) à partir de 992px"
    -->
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto"> <!-- ms-auto = margin-start: auto (pousse à droite) -->
        <li class="nav-item">
          <a class="nav-link active" href="#">Accueil</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Profil</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

6. Composants JavaScript (Modal, Dropdown)

Bootstrap n'est pas que du CSS. Il fournit une suite de plugins JavaScript (ES6) pour l'interactivité. Vous pouvez les utiliser de deux façons.

Dépendance : Le JS de Bootstrap (surtout les Dropdowns et Popovers) nécessite Popper.js pour le positionnement. C'est pourquoi on utilise bootstrap.bundle.min.js (le "bundle" inclut Popper).

Méthode 1 : Attributs `data-bs-*` (La voie facile)

C'est la méthode "sans JS". Vous liez un "déclencheur" (trigger) à un "contenu" (content) via des attributs data-bs-*.

Exemple : Un Modal (Pop-up)

<!-- 1. Le Déclencheur (Le Bouton) -->
<button type="button" class="btn btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#monModal">
  Ouvrir le Modal
</button>

<!-- 2. Le Contenu (Le Modal, caché par défaut) -->
<div class="modal fade" id="monModal" 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">
        <p>Contenu du modal...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>

Méthode 2 : Programmatique (La voie JS)

Si vous avez besoin de contrôler le modal depuis votre propre JavaScript (ex: l'ouvrir après un appel API).

<!-- HTML -->
<div class="modal" id="monModalJS"> ... </div>

<!-- JavaScript -->
<script>
  // 1. Récupérer l'élément
  const modalElement = document.getElementById('monModalJS');
  
  // 2. Créer une instance Bootstrap
  const monModal = new bootstrap.Modal(modalElement);

  // 3. Contrôler !
  // monModal.show();
  // monModal.hide();
</script>

7. Utilities (Spacing - La "Spacer Map")

Bien que Bootstrap soit "Component-First", il a adopté une grande partie de la philosophie "Utility-First" de Tailwind pour les tâches courantes (spacing, couleurs, ...).

La convention est : {propriété}{côtés}-{taille}

1. Propriété & Côtés

m - margin
p - padding

t - top (ex: pt-2)
b - bottom (ex: pb-2)
s - start (left en LTR, right en RTL)
e - end (right en LTR, left en RTL)
x - Axe horizontal (left + right) (ex: px-4)
y - Axe vertical (top + bottom) (ex: py-4)
(vide) - Tous les 4 côtés (ex: p-3)

2. Taille (La "Spacer Map")

La taille n'est pas en pixels. C'est un index (0 à 5) qui pointe vers une variable Sass appelée $spacer (qui vaut 1rem par défaut).

Classe	Valeur (par défaut)
`p-0`	`padding: 0;`
`p-1`	`padding: $spacer * .25;` (soit 0.25rem)
`p-2`	`padding: $spacer * .5;` (soit 0.5rem)
`p-3`	`padding: $spacer * 1;` (soit 1rem)
`p-4`	`padding: $spacer * 1.5;` (soit 1.5rem)
`p-5`	`padding: $spacer * 3;` (soit 3rem)

Autres Utilitaires

<!-- Centrer un bloc -->
<div class="mx-auto" style="width: 200px;">
  Centré horizontalement (margin-x: auto)
</div>

<!-- Gouttières (Gap) pour Flex/Grid (v5+) -->
<div class="d-flex gap-3">
  <div>Item 1</div> <!-- 1rem de "gap" entre les items -->
  <div>Item 2</div>
</div>

<!-- Couleurs -->
<div class="text-primary bg-light border border-success">
  Texte, fond, et bordure.
</div>

8. Utilities (Flex & Display Helpers)

Bootstrap fournit un ensemble complet de classes utilitaires pour Flexbox, qui sont la base de la plupart des composants (comme le Navbar ou la Grid).

Activation (`d-flex`)

Pour activer Flexbox, vous utilisez .d-flex (display: flex) ou .d-inline-flex.
Vous pouvez même les activer de façon responsive : .d-md-flex (n'est flex qu'à partir de 768px).

Rôle	Classes
Direction	`.flex-row` (défaut), `.flex-row-reverse`, `.flex-column`, `.flex-column-reverse`
Justify Content (Axe principal)	`.justify-content-start`, `.justify-content-center`, `.justify-content-end`, `.justify-content-between`, `.justify-content-around`
Align Items (Axe secondaire)	`.align-items-start`, `.align-items-center`, `.align-items-end`, `.align-items-baseline`, `.align-items-stretch`
Wrap (Passage à la ligne)	`.flex-wrap`, `.flex-nowrap`
Enfants (Grow/Shrink)	`.flex-grow-1` (prend la place), `.flex-shrink-0` (refuse de rétrécir)

Exemple : Le "Saint Graal" (Centrage parfait)

<!-- Un conteneur qui fait 100% de la hauteur de la vue -->
<div class="vh-100 d-flex justify-content-center align-items-center">
  <div>
    Je suis parfaitement centré, horizontalement et verticalement.
  </div>
</div>

Display Helpers (`d-`)

Classes très utiles pour le responsive. (d = display).

<!-- N'est visible QUE sur mobile -->
<div class="d-block d-md-none">
  Visible sur XS, SM. Caché sur MD, LG, XL.
</div>

<!-- N'est visible QUE sur desktop -->
<div class="d-none d-lg-block">
  Caché sur XS, SM, MD. Visible sur LG, XL.
</div>

9. Styling des Formulaires

Les formulaires HTML sont moches par défaut. Bootstrap fournit un ensemble complet de classes pour les styler proprement.

Composants de base

Classe	Rôle
`.form-label`	Style le `<label>`.
`.form-control`	La classe principale. Style `<input>`, `<textarea>`, `<select>` (leur donne 100% de largeur, padding, etc.).
`.form-check`	Un "wrapper" pour styler `<input type="checkbox">` ou `radio`.
`.form-text`	Texte d'aide (en petit, grisé) sous un champ.
`.is-invalid` / `.is-valid`	(A ajouter via JS) Style les champs en erreur (rouge) ou succès (vert).

Exemple : Champ de base (Email)

<div class="mb-3"> <!-- mb-3 = margin-bottom -->
  <label for="emailInput" class="form-label">Adresse Email</label>
  <input type="email" class="form-control" id="emailInput" placeholder="nom@exemple.com">
  <div class="form-text">
    Nous ne partagerons jamais votre email.
  </div>
</div>

Exemple : "Floating Labels" (Layout moderne)

Bootstrap 5 a popularisé ce style où le label "flotte" au-dessus du champ quand il a le focus.

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="nom@exemple.com">
  <label for="floatingInput">Adresse Email</label>
</div>

Exemple : "Input Group" (Préfixe/Suffixe)

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

10. Customisation (La "Bonne Façon" avec Sass)

La "mauvaise façon" (débutant) : Utiliser le CDN (bootstrap.min.css) puis créer un custom.css qui *écrase* les styles (ex: .btn-primary { background-color: red !important; }). C'est un cauchemar de spécificité et de maintenance.

La "bonne façon" (pro) : Utiliser Sass (voir 2.1). Vous ne "modifiez" pas Bootstrap. Vous *définissez* ses variables *avant* de l'importer.

Le Processus (Détaillé)

Bootstrap est construit avec des milliers de variables Sass ($primary, $body-bg, $border-radius). Elles ont toutes le flag !default, ce qui signifie "utilise cette valeur, *sauf si* elle a déjà été définie".

Votre fichier custom.scss (que vous compilez) :

/* --- 1. DÉFINIR VOS VARIABLES --- */
/* C'est ici que vous définissez VOTRE thème. */
/* (Vous pouvez copier/coller depuis _variables.scss de Bootstrap) */

// Changer les couleurs sémantiques
$primary:   #5D3FD3; // (un violet)
$secondary: #6c757d;
$success:   #198754;
$danger:    #dc3545;
$light:     #f8f9fa;
$dark:      #212529;

// Changer la police
$font-family-sans-serif: "Inter", -apple-system, sans-serif;

// Changer les styles globaux
$body-bg: $dark;
$body-color: $light;
$link-color: $primary;

// Changer les composants
$border-radius: 0;       // Enlever tous les coins arrondis
$btn-padding-y: 0.75rem; // Rendre les boutons plus grands

/* --- 2. IMPORTER BOOTSTRAP --- */
/* * Maintenant, importez Bootstrap. 
 * Il va lire toutes vos variables ci-dessus et les utiliser
 * au lieu de ses propres valeurs par défaut.
 */
@import "node_modules/bootstrap/scss/bootstrap";

/* * RÉSULTAT :
 * Votre .btn-primary sera violet.
 * Votre .card n'aura pas de coins arrondis.
 * Votre <body> sera sombre.
 * ...et vous n'aurez pas écrit une seule règle CSS "override".
 */

11. Bootstrap Icons

Pendant des années, Bootstrap a utilisé (ou recommandé) Font Awesome. Ils ont maintenant leur propre bibliothèque d'icônes officielle : Bootstrap Icons.

C'est une bibliothèque de plus de 2000 icônes SVG, conçues pour s'intégrer parfaitement à Bootstrap.

Méthode 1 : Fonte d'icônes (La plus simple)

La façon la plus simple (similaire à Font Awesome). Vous incluez leur CSS (via CDN ou npm) et utilisez des balises <i>.

1. Installation (CDN) :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

2. Utilisation :

<button class="btn btn-danger">
  <i class="bi bi-trash"></i> Supprimer
</button>

<h2>
  <i class="bi bi-heart-fill" style="color: red;"></i> J'aime
</h2>

<!-- Les icônes héritent de la taille (font-size) et de la couleur (color) ! -->
<div class="display-1 text-primary">
  <i class="bi bi-bell"></i>
</div>

Méthode 2 : SVG "inline" (La plus performante)

Vous pouvez aussi copier-coller le code SVG de l'icône (disponible sur leur site) directement dans votre HTML. C'est plus verbeux, mais vous ne chargez que les icônes que vous utilisez (meilleur pour la performance).

12. Écosystème, Thèmes & Références

L'un des plus grands atouts de Bootstrap est son écosystème mature. Vous n'êtes jamais seul.

Thèmes (Gratuits & Payants)

Le principal reproche fait à Bootstrap ("tous les sites se ressemblent") est résolu par les thèmes.

Site	Description
Bootswatch	Le plus populaire. Une collection de thèmes gratuits (des fichiers `bootstrap.min.css` "drop-in") qui changent radicalement le look (couleurs, polices, ombres). (Ex: "Darkly", "Cerulean", "Vapor").
ThemeForest, etc.	Des marketplaces (payantes) qui vendent des thèmes Bootstrap premium (souvent des "Admin Dashboards" complets) pour 5$ à 50$.

Intégrations (React, Vue, ...)

Il existe des bibliothèques qui "enveloppent" les composants Bootstrap pour les frameworks JS.

React-Bootstrap : Ré-implémente tous les composants Bootstrap (<Button>, <Modal>) en tant que composants React (pas de jQuery).
BootstrapVue (pour Vue 2) / BootstrapVueNext (pour Vue 3) : Idem pour l'écosystème Vue.js.

🥾 Bootstrap – Le Guide Ultime

1. C'est quoi Bootstrap ?

2. Installation (CDN vs npm)

3. 🚀 Grid System (Core)

4. 📱 Grid System (Responsive)

5. Composants (Nav, Card)

6. Composants JavaScript

7. Utilities (Spacing)

8. Utilities (Flex & Display)

9. Styling des Formulaires

10. Customisation (Sass)

11. Bootstrap Icons

12. Écosystème & Thèmes

🥾 Bootstrap – Le Guide Ultime

1. C'est quoi Bootstrap ?

2. Installation (CDN vs npm)

3. 🚀 Grid System (Core)

4. 📱 Grid System (Responsive)

5. Composants (Nav, Card)

6. Composants JavaScript

7. Utilities (Spacing)

8. Utilities (Flex & Display)

9. Styling des Formulaires

10. Customisation (Sass)

11. Bootstrap Icons

12. Écosystème & Thèmes

La Philosophie : "Component-First"

Méthode 1 : CDN (Facile & Rapide)

Méthode 2 : npm + Sass (Professionnelle)

Exemple de Grille Simple (3 colonnes égales)

Les Breakpoints

Exemple : Le Layout "Stacking" (Empilement)

Button (.btn)

Card (.card)

Navbar (.navbar)

Méthode 1 : Attributs `data-bs-*` (La voie facile)

Méthode 2 : Programmatique (La voie JS)

1. Propriété & Côtés

2. Taille (La "Spacer Map")

Autres Utilitaires

Activation (d-flex)

Exemple : Le "Saint Graal" (Centrage parfait)

Display Helpers (d-)

Composants de base

Exemple : Champ de base (Email)

Exemple : "Floating Labels" (Layout moderne)

Exemple : "Input Group" (Préfixe/Suffixe)

Le Processus (Détaillé)

Méthode 1 : Fonte d'icônes (La plus simple)

Méthode 2 : SVG "inline" (La plus performante)

Thèmes (Gratuits & Payants)

Intégrations (React, Vue, ...)

Références Extérieures (Liens)

Button (`.btn`)

Card (`.card`)

Navbar (`.navbar`)

Activation (`d-flex`)

Display Helpers (`d-`)