Bootstrap 5 : composants essentiels

Installation et structure

Bootstrap 5 est la dernière version stable, compatibilité totale avec les navigateurs modernes. Aucune dépendance jQuery (rupture avec v4).

Qu'est-ce qui change en v5

Pas jQuery — JavaScript pur
CSS custom variables (theme personnalisable)
Meilleur support du dark mode
Utilitaires étendus (spacing, typography, etc)

Installation via CDN (plus rapide pour démarrer):

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Demo</title>
    <!-- CSS Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Mon site Bootstrap 5</h1>
    </div>

    <!-- JavaScript Bootstrap (optionnel) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Ou via npm pour les projets modernes:

npm install bootstrap

Grid system responsive

Le système de grille Bootstrap divise la page en 12 colonnes. On compose des layouts avec .container, .row, et .col-*.

Breakpoints Bootstrap 5: xs (0), sm (576px), md (768px), lg (992px), xl (1200px), xxl (1400px)

Exemple: layout responsive 2 colonnes sur desktop, 1 colonne sur mobile:

<div class="container">
    <div class="row">
        <!-- Sur mobile: pleine largeur, sur md+: 6 colonnes -->
        <div class="col-12 col-md-6">
            <p>Colonne gauche</p>
        </div>
        <div class="col-12 col-md-6">
            <p>Colonne droite</p>
        </div>
    </div>
</div>

Alignement et espacement:

<!-- Centrer le contenu -->
<div class="row justify-content-center">
    <div class="col-md-8">...</div>
</div>

<!-- Espacement entre colonnes -->
<div class="row g-4"> <!-- gap: 1.5rem -->
    <div class="col-md-6">...</div>
    <div class="col-md-6">...</div>
</div>

Boutons et icônes

Bootstrap fournit des styles de boutons prêts à l'emploi. Utilise les classes .btn et .btn-{variante}.

<!-- Variantes de couleurs -->
<button class="btn btn-primary">Primaire</button>
<button class="btn btn-secondary">Secondaire</button>
<button class="btn btn-success">Succès</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Attention</button>

<!-- Boutons en outline -->
<button class="btn btn-outline-primary">Outline</button>

<!-- Tailles -->
<button class="btn btn-primary btn-lg">Grand</button>
<button class="btn btn-primary btn-sm">Petit</button>

<!-- États -->
<button class="btn btn-primary" disabled>Désactivé</button>
<button class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle</button>

Pour les icônes, combine avec Bootstrap Icons ou Font Awesome:

<!-- Bootstrap Icons (via CDN) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

<button class="btn btn-primary">
    <i class="bi bi-download"></i> Télécharger
</button>

Cartes (Cards)

Les cartes sont des conteneurs versables contenant du titre, du corps et des actions. Parfait pour les grilles de contenu.

<div class="card" style="width: 18rem;">
    <img src="image.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Titre de la carte</h5>
        <p class="card-text">Texte descriptif court.</p>
        <a href="#" class="btn btn-primary">Action</a>
    </div>
</div>

Grille de cartes responsives:

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    <div class="col">
        <div class="card">...</div>
    </div>
    <!-- répète pour d'autres cartes -->
</div>

row-cols-* := nombre de colonnes

row-cols-1: 1 colonne sur tous les breakpoints
row-cols-md-2: 2 colonnes sur md+
row-cols-lg-3: 3 colonnes sur lg+

Modales et alertes

Modales: boîtes de dialogue qui captent l'attention. Utilisées pour les confirmations, formulaires rapides, etc.

<!-- Bouton déclencheur -->
<button type="button" class="btn btn-primary"
    data-bs-toggle="modal" data-bs-target="#monModal">
    Ouvrir modal
</button>

<!-- Modal -->
<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</h5>
                <button type="button" class="btn-close"
                    data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Contenu de la 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">
                    Confirmer
                </button>
            </div>
        </div>
    </div>
</div>

Alertes: messages contextuels sans fermeture automatique.

<div class="alert alert-success" role="alert">
    ✓ Opération réussie!
</div>

<div class="alert alert-danger alert-dismissible fade show" role="alert">
    ✗ Erreur: vérifiez les champs requis
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Formulaires accessibles

Bootstrap fournit un système de formulaires étiquetés et responsifs. Toujours associer <label> et <input> avec un for.

<form>
    <div class="mb-3">
        <label for="email" class="form-label">Adresse email</label>
        <input type="email" class="form-control" id="email"
            name="email" required>
        <div class="form-text">
            Nous ne partagerons jamais votre email.
        </div>
    </div>

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

    <!-- Checkbox -->
    <div class="form-check mb-3">
        <input type="checkbox" class="form-check-input" id="check1">
        <label class="form-check-label" for="check1">
            J'accepte les conditions
        </label>
    </div>

    <button type="submit" class="btn btn-primary">Envoyer</button>
</form>

États de validation dynamiques:

<div class="mb-3">
    <label for="username" class="form-label">Nom d'utilisateur</label>
    <input type="text" class="form-control is-invalid"
        id="username" required>
    <div class="invalid-feedback">
        Le nom d'utilisateur est requis.
    </div>
</div>

Navbars et navigation

Navbar: barre de navigation fixe ou sticky avec menu responsive pour mobile.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Mon Site</a>

        <!-- Bouton mobile -->
        <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 ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Accueil</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#"
                        id="navbarDropdown" role="button"
                        data-bs-toggle="dropdown">
                        Menu
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Option 1</a></li>
                        <li><a class="dropdown-item" href="#">Option 2</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Fixe ou sticky:

<!-- Fixe en haut -->
<nav class="navbar fixed-top navbar-light bg-light">...</nav>

<!-- Sticky (depuis le haut du viewport) -->
<nav class="navbar sticky-top navbar-light bg-light">...</nav>

<!-- Ajoute du padding au body pour éviter chevauchement -->
<body style="padding-top: 56px;">
    ...
</body>

Bonnes pratiques

Accessibilité d'abord: toujours associer labels et inputs, utiliser role et aria-* sur les composants dynamiques.
Responsive par défaut: concevoir mobile-first, tester sur sm (576px) et md (768px).
Utilitaires avant custom CSS: Bootstrap 5 fournit des utilitaires pour spacing (m-*, p-*), display (d-*), flexbox (d-flex, justify-content-*).
Personnaliser via CSS variables: modifier --bs-primary, --bs-body-bg au lieu de surcharger les classes.
Minifier et purger: en production, n'inclure que les composants utilisés avec PurgeCSS ou Tailwind CSS.
Tester le dark mode: Bootstrap 5 supporte data-bs-theme="dark" sur l'élément racine.

Exemple: personnaliser les couleurs:

/*  Surcharger les variables Bootstrap */
:root {
    --bs-primary: #e74c3c;
    --bs-secondary: #95a5a6;
    --bs-body-bg: #f8f9fa;
    --bs-body-color: #2c3e50;
}