Module 7 : Bootstrap - Framework CSS pour le développement web

Introduction

Bootstrap est un framework CSS front-end. Il permet de créer rapidement des sites web responsifs et modernes grâce à un ensemble de composants prêts à l'emploi, un système de grille puissant et des classes utilitaires. Dans ce module, nous découvrirons comment intégrer Bootstrap dans nos projets et exploiter ses principales fonctionnalités pour accélérer le développement tout en maintenant un design professionnel et cohérent.

Dans notre cours, nous utilisons la version 5.3 de Bootstrap, qui est la dernière version stable au moment de la rédaction de ce cours. https://getbootstrap.com/docs/5.3/getting-started/introduction/

Extention VsCode

Avant d'aller plus loin, télécharger et installer cette extention. Elle permet d'afficher la liste des classes CSS Bootstrap disponibles lorsque vous ajoutez une classe dans votre code : Bootstrap Intellisense

Objectifs du cours

Comprendre ce qu'est un framework front-end et les avantages de Bootstrap
Savoir intégrer Bootstrap via CDN ou en local
Maîtriser le système de grille et les points de rupture (breakpoints)
Utiliser les composants Bootstrap courants (Navbar, Card, Carousel, etc.)
Appliquer les classes utilitaires de mise en forme
Mettre en forme des formulaires avec les classes Bootstrap
Intégrer des icônes Bootstrap Icons
Personnaliser Bootstrap avec les variables root CSS

Qu'est-ce qu'un framework front-end ?

Définition

Un framework front-end est un ensemble de fichiers CSS et JavaScript préconçus qui fournissent des composants, des styles et des outils prêts à l'emploi pour accélérer le développement d'interfaces web. Plutôt que de tout coder à la main, vous utilisez des classes et des composants déjà testés et optimisé

Avantages de Bootstrap

Avantage	Description
Rapidité de développement	Des composants prêts à l'emploi permettent de créer des interfaces rapidement
Responsive par défaut	Le système de grille s'adapte automatiquement à toutes les tailles d'écran
Cohérence visuelle	Des styles uniformes pour tous les éléments de l'interface
Documentation complète	Documentation officielle détaillée avec de nombreux exemples
Communauté active	Grande communauté, nombreuses ressources et extensions disponibles

CDN vs Local : deux façons d'intégrer Bootstrap

Il existe deux méthodes principales pour intégrer Bootstrap dans un projet :

Méthode 1 : CDN (Content Delivery Network)

Un CDN est un réseau de serveurs distribués dans le monde qui hébergent des fichiers. Vous ajoutez simplement des liens vers ces fichiers dans votre HTML.

html

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

    <h1>Bonjour Bootstrap !</h1>

    <!-- JavaScript Bootstrap via CDN (à placer avant la fermeture de </body>) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Méthode 2 : Installation locale

Vous téléchargez les fichiers Bootstrap et les placez directement dans votre projet.

Rendez-vous sur https://getbootstrap.com/docs/5.3/getting-started/download/
Téléchargez la version compilée (Compiled CSS and JS)
Extrayez les fichiers dans votre projet

mon-projet/
├── index.html
├── css/
│   ├── bootstrap.min.css   ← Fichier CSS de Bootstrap
│   └── styles.css           ← Votre CSS personnalisé
└── js/
    └── bootstrap.bundle.min.js  ← Fichier JS de Bootstrap

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site Bootstrap</title>
    <!-- CSS Bootstrap en local -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Votre CSS personnalisé (après Bootstrap pour pouvoir le surcharger) -->
    <link href="css/styles.css" rel="stylesheet">
</head>
<body>

    <h1>Bonjour Bootstrap !</h1>

    <!-- JavaScript Bootstrap en local -->
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Comparaison CDN vs Local

Critère	CDN	Local
Mise en place	Très rapide, juste ajouter les liens	Nécessite le téléchargement des fichiers
Performance	Souvent déjà en cache du navigateur	Chargement depuis votre serveur
Connexion internet	Requise pour charger les fichiers	Fonctionne hors ligne
Contrôle	Dépend du serveur CDN	Contrôle total des fichiers
Utilisation recommandée	Prototypage rapide, apprentissage	Projets en production

Important : La balise <meta name="viewport" ...> est obligatoire pour que le design responsive de Bootstrap fonctionne correctement sur les appareils mobiles. Sans elle, le site ne s'adaptera pas aux petits écrans.

IMPORTANT

Dans notre cours, nous allons utiliser la version 5.3 de Bootstrap. Si vous prenez des exemples de code en ligne ou encore des tutoriels, des composants, etc. assurez-vous que ceux-ci sont issus de la version 5.3 : https://getbootstrap.com/docs/5.3/components/.

Utilisation de Bootstrap

Définition

Le principe derrière l'utilisation d'un framework CSS comme Bootstrap est d'éviter de coder ou recoder des règles CSS de base qui gèrent la mise en page et la mise en forme typique d'un site web. Bootstrap fournit un ensemble de classes préconçues pour les éléments courants (boutons, grilles, formulaires, navigation, etc.), permettant aux développeurs de se concentrer sur le contenu et la fonctionnalité plutôt que sur le style.

Au lieu d'écrire des centaines de lignes de CSS pour créer des boutons, des mises en page responsives ou des formulaires, vous utilisez simplement les classes Bootstrap. Cela accélère le développement, assure une cohérence visuelle et réduit les erreurs.

Exemple pratique : page web simple avec Bootstrap via CDN

Voici une page HTML basique qui utilise Bootstrap via CDN. Elle démontre l'utilisation de classes pour la mise en page (grille), les boutons et le texte.

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page Bootstrap</title>
    <!-- CSS Bootstrap via CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <!-- Conteneur principal -->
    <div class="container mt-5">
        <h1 class="text-center text-primary mb-4">Bienvenue sur mon site</h1>
        
        <!-- Mise en page avec Flexbox : 2 sections égales -->
        <div class="d-flex">
            <div class="w-50 me-3">
                <h2>Section gauche</h2>
                <p class="lead">Ceci est un paragraphe avec la classe <code>.lead</code> pour le mettre en évidence.</p>
                <button class="btn btn-primary">Bouton primaire</button>
            </div>
            <div class="w-50">
                <h2>Section droite</h2>
                <p>Voici du texte normal avec un <a href="#" class="text-decoration-none">lien stylisé</a>.</p>
                <button class="btn btn-outline-success">Bouton secondaire</button>
            </div>
        </div>
        
        <!-- Pied de page -->
        <footer class="mt-5 py-4 bg-light text-center">
            <p class="mb-0">© 2024 Mon Site Web - Réalisé avec Bootstrap</p>
        </footer>
    </div>

    <!-- JavaScript Bootstrap via CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Dans cet exemple :

.container centre le contenu et ajoute des marges
.d-flex et .w-50 créent une mise en page horizontale avec deux sections de largeur égale
.btn, .btn-primary, .btn-outline-success stylisent les boutons sans CSS personnalisé
.text-center, .text-primary, .mt-5, etc. sont des classes utilitaires pour l'alignement, les couleurs et l'espacement

Cette approche permet de créer une page web professionnelle en quelques minutes, sans écrire une seule ligne de CSS !

Liens vers la documentation Bootstrap

Pour en savoir plus sur les classes utilisées dans cet exemple :

Classe(s)	Catégorie de classe	Lien URL
`.container`	Conteneurs	https://getbootstrap.com/docs/5.3/layout/containers/
`.d-flex`	Utilitaires Flexbox	https://getbootstrap.com/docs/5.3/utilities/flex/
`.w-50`	Utilitaires de dimensionnement	https://getbootstrap.com/docs/5.3/utilities/sizing/
`.me-3`, `.mt-5`, `.mb-4`, `.py-4`, `.mb-0`	Utilitaires d'espacement	https://getbootstrap.com/docs/5.3/utilities/spacing/
`.btn`, `.btn-primary`, `.btn-outline-success`	Boutons	https://getbootstrap.com/docs/5.3/components/buttons/
`.text-center`, `.text-primary`, `.text-decoration-none`	Utilitaires de texte	https://getbootstrap.com/docs/5.3/utilities/text/
`.lead`	Typographie	https://getbootstrap.com/docs/5.3/content/typography/
`.bg-light`	Utilitaires de couleurs	https://getbootstrap.com/docs/5.3/utilities/colors/

Il en existe beaucoup d'autres, tous documentés en détail sur le site officiel de Bootstrap : https://getbootstrap.com/docs/5.3/getting-started/introduction/

Le système de grille (Grid System)

Définition

Le système de grille de Bootstrap est un système de mise en page basé sur 12 colonnes qui utilise des conteneurs, des rangées et des colonnes pour organiser le contenu. Il repose sur Flexbox et permet de créer des mises en page responsives qui s'adaptent automatiquement à la taille de l'écran.

Le principe est simple : chaque rangée (.row) est divisée en 12 colonnes égales. Vous choisissez combien de colonnes chaque élément occupe pour créer votre mise en page.

Exemple visuel d'une rangée avec 12 colonnes

Structure de base

La grille Bootstrap suit toujours cette hiérarchie :

html

<div class="container">        <!-- 1. Le conteneur -->
    <div class="row">           <!-- 2. La rangée -->
        <div class="col-6">Colonne 1 (6/12 = 50%)</div>
        <div class="col-6">Colonne 2 (6/12 = 50%)</div>
    </div>
</div>

Le conteneur (.container) : Enveloppe le contenu et ajoute des marges automatiques pour centrer la page. Il existe trois types :

Classe	Comportement
`.container`	Largeur maximale fixe qui change selon le breakpoint
`.container-fluid`	Occupe toujours 100% de la largeur disponible
`.container-{breakpoint}`	100% de largeur jusqu'au breakpoint spécifié , puis largeur fixe

La rangée (.row) : Crée une ligne horizontale qui contient les colonnes. Elle utilise Flexbox pour aligner les colonnes côte à côte.

Les colonnes (.col-*) : Définissent la largeur de chaque élément en fonction du nombre de colonnes occupées (sur 12).

Exemples de mise en page avec les colonnes

html

<!-- 2 colonnes égales (6 + 6 = 12) -->
<div class="container">
    <div class="row">
        <div class="col-6">Moitié gauche</div>
        <div class="col-6">Moitié droite</div>
    </div>
</div>

<!-- 3 colonnes égales (4 + 4 + 4 = 12) -->
<div class="container">
    <div class="row">
        <div class="col-4">Tiers 1</div>
        <div class="col-4">Tiers 2</div>
        <div class="col-4">Tiers 3</div>
    </div>
</div>

<!-- Sidebar + contenu principal (3 + 9 = 12) -->
<div class="container">
    <div class="row">
        <div class="col-3">Barre latérale</div>
        <div class="col-9">Contenu principal</div>
    </div>
</div>

<!-- Colonnes automatiques (largeur égale automatique) -->
<div class="container">
    <div class="row">
        <div class="col">Auto 1</div>
        <div class="col">Auto 2</div>
        <div class="col">Auto 3</div>
    </div>
</div>

Note : Si le total des colonnes dépasse 12, la colonne excédentaire passera automatiquement à la ligne suivante.

Points importants

Toujours placer les colonnes (.col-*) dans une rangée (.row)
Toujours placer les rangées dans un conteneur (.container ou .container-fluid)
Le total des colonnes dans une rangée ne doit idéalement pas dépasser 12
Utiliser .col sans chiffre pour des colonnes de largeur égale automatique

Points de rupture (Breakpoints) et grille responsive

Définition

Les points de rupture (breakpoints) sont des largeurs d'écran prédéfinies à partir desquelles la mise en page change de comportement. Bootstrap 5.3 propose 6 breakpoints qui permettent d'adapter le design à différents appareils : téléphones, tablettes, ordinateurs portables et grands écrans.

Les 6 breakpoints de Bootstrap

Breakpoint	Préfixe de classe	Dimension	Appareils typiques
Extra small	(aucun)	< 576px	Téléphones en mode portrait
Small	`sm`	≥ 576px	Téléphones en mode paysage
Medium	`md`	≥ 768px	Tablettes
Large	`lg`	≥ 992px	Ordinateurs portables
Extra large	`xl`	≥ 1200px	Ordinateurs de bureau
Extra extra large	`xxl`	≥ 1400px	Grands écrans

Utilisation des breakpoints avec la grille

Les breakpoints se combinent avec les classes de colonnes pour créer des mises en page adaptatives. La syntaxe est : .col-{breakpoint}-{nombre}.

html

<div class="container">
    <div class="row">
        <!-- 
            - Mobile (< 576px) : chaque colonne occupe 12/12 = 100% (empilées)
            - Tablette (≥ 768px) : chaque colonne occupe 6/12 = 50% (2 par ligne)
            - Desktop (≥ 992px) : chaque colonne occupe 3/12 = 25% (4 par ligne)
        -->
        <div class="col-12 col-md-6 col-lg-3">Élément 1</div>
        <div class="col-12 col-md-6 col-lg-3">Élément 2</div>
        <div class="col-12 col-md-6 col-lg-3">Élément 3</div>
        <div class="col-12 col-md-6 col-lg-3">Élément 4</div>
    </div>
</div>

Comportement des breakpoints

Le système fonctionne en mobile-first : les styles s'appliquent à partir du breakpoint spécifié et au-dessus.

html

<!-- Exemple : mise en page d'un site web classique -->
<div class="container">
    <div class="row">
        <!-- Sidebar : 100% sur mobile, 4/12 sur tablette et plus -->
        <aside class="col-12 col-md-4">
            <p>Navigation latérale</p>
        </aside>
        <!-- Contenu : 100% sur mobile, 8/12 sur tablette et plus -->
        <main class="col-12 col-md-8">
            <p>Contenu principal</p>
        </main>
    </div>
</div>

Exemple concret : galerie d'images responsive

html

<div class="container">
    <h2>Notre galerie</h2>
    <div class="row">
        <!-- 1 image par ligne sur mobile, 2 sur tablette, 4 sur desktop -->
        <div class="col-12 col-sm-6 col-lg-3 mb-3 bg-primary text-white p-3 text-center">Col 1</div>
        <div class="col-12 col-sm-6 col-lg-3 mb-3 bg-success text-white p-3 text-center">Col 2</div>
        <div class="col-12 col-sm-6 col-lg-3 mb-3 bg-info text-white p-3 text-center">Col 3</div>
        <div class="col-12 col-sm-6 col-lg-3 mb-3 bg-warning text-dark p-3 text-center">Col 4</div>
    </div>
</div>

Démonstration interactive du système de grille responsive

Note : La classe .img-fluid rend l'image responsive en lui appliquant max-width: 100% et height: auto.

Points importants

Bootstrap utilise l'approche mobile-first : on définit d'abord le comportement mobile, puis on ajuste pour les écrans plus grands
Les classes sans préfixe de breakpoint (.col-12) s'appliquent à toutes les tailles d'écran
Les classes avec breakpoint (.col-md-6) s'appliquent à partir de cette taille et au-dessus
Il n'est pas nécessaire de spécifier un breakpoint pour chaque taille ; les styles « héritent » vers le haut

Composants Bootstrap

Définition

Les composants Bootstrap sont des éléments d'interface prêts à l'emploi (navigation, cartes, boutons, carrousels, etc.) qui peuvent être intégrés dans vos pages simplement en utilisant les classes CSS et la structure HTML proposées par Bootstrap. Certains composants nécessitent le JavaScript de Bootstrap pour fonctionner (comme le carrousel ou le dropdown).

La Navbar est un composant de navigation responsive qui se transforme automatiquement en menu hamburger sur les petits écrans.

Mise en contexte

La barre de navigation est présente sur pratiquement chaque site web. Elle permet aux utilisateurs de naviguer entre les différentes sections ou pages du site. Bootstrap fournit un composant Navbar complet qui gère automatiquement le comportement responsive.

Exemple pratique

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <!-- Logo / Nom du site -->
        <a class="navbar-brand" href="#">MonSite</a>

        <!-- 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>

        <!-- Liens de navigation -->
        <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">
                    <a class="nav-link" href="#">À propos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Classe	Rôle
`.navbar`	Classe de base pour la barre de navigation
`.navbar-expand-lg`	Le menu se déplie à partir du breakpoint `lg` (992px)
`.navbar-dark`	Texte clair pour fond sombre
`.navbar-light`	Texte sombre pour fond clair
`.navbar-brand`	Style pour le logo ou le nom du site
`.navbar-toggler`	Bouton hamburger pour mobile
`.navbar-nav`	Conteneur pour les liens de navigation
`.nav-link`	Style pour chaque lien de navigation
`.nav-item`	Élément de liste de navigation
`.ms-auto`	Pousse les éléments vers la droite (margin-start: auto)

Important : L'attribut data-bs-target="#navbarNav" du bouton hamburger doit correspondre à l'id du div.collapse. Sans cette correspondance, le menu mobile ne fonctionnera pas.

Le Dropdown est un menu déroulant qui s'affiche au clic sur un bouton ou un lien.

Mise en contexte

Les menus déroulants sont couramment utilisés dans les barres de navigation pour regrouper des sous-liens, ou dans les formulaires pour offrir des options additionnelles. Bootstrap gère automatiquement l'ouverture et la fermeture du menu via JavaScript.

html

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" 
            data-bs-toggle="dropdown">
        Catégories
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">HTML</a></li>
        <li><a class="dropdown-item" href="#">CSS</a></li>
        <li><a class="dropdown-item" href="#">JavaScript</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Bootstrap</a></li>
    </ul>
</div>

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">MonSite</a>
        <button class="navbar-toggler" type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#navbarDropdown">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarDropdown">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Accueil</a>
                </li>
                <!-- Dropdown dans la navbar -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" 
                       data-bs-toggle="dropdown">
                        Services
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Design Web</a></li>
                        <li><a class="dropdown-item" href="#">Développement</a></li>
                        <li><a class="dropdown-item" href="#">Hébergement</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Classe	Rôle
`.dropdown`	Conteneur du menu déroulant
`.dropdown-toggle`	Bouton qui déclenche l'ouverture du menu
`.dropdown-menu`	Le menu déroulant lui-même
`.dropdown-item`	Chaque élément du menu
`.dropdown-divider`	Ligne de séparation entre les éléments

Card

La Card est un conteneur flexible pour afficher du contenu structuré (image, titre, texte, boutons).

Mise en contexte

Les cartes sont l'un des composants les plus utilisés dans le web moderne. Elles servent à afficher des articles, des produits, des profils ou tout autre contenu structuré de manière visuellement attrayante. Elles remplacent les anciens panels et thumbnails de Bootstrap 3.

Exemple pratique : carte simple

html

<div class="card" style="width: 18rem;">
    <img src="https://placehold.co/300x200/cccccc/000000?text=Image+Carte" 
         class="card-img-top" alt="Image de la carte">
    <div class="card-body">
        <h5 class="card-title">Titre de la carte</h5>
        <p class="card-text">
            Voici un court texte descriptif pour accompagner le titre 
            de la carte et donner un aperçu du contenu.
        </p>
        <a href="#" class="btn btn-primary">En savoir plus</a>
    </div>
</div>

Exemple pratique : grille de cartes

html

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4 mb-4">
            <div class="card h-100">
                <img src="https://placehold.co/400x250/3498db/ffffff?text=Service+1" 
                     class="card-img-top" alt="Service 1">
                <div class="card-body">
                    <h5 class="card-title">Design Web</h5>
                    <p class="card-text">Création de maquettes modernes et responsive pour votre entreprise.</p>
                </div>
                <div class="card-footer">
                    <a href="#" class="btn btn-outline-primary w-100">Découvrir</a>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-4">
            <div class="card h-100">
                <img src="https://placehold.co/400x250/2ecc71/ffffff?text=Service+2" 
                     class="card-img-top" alt="Service 2">
                <div class="card-body">
                    <h5 class="card-title">Développement</h5>
                    <p class="card-text">Développement sur mesure de sites web et applications.</p>
                </div>
                <div class="card-footer">
                    <a href="#" class="btn btn-outline-primary w-100">Découvrir</a>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-4">
            <div class="card h-100">
                <img src="https://placehold.co/400x250/e74c3c/ffffff?text=Service+3" 
                     class="card-img-top" alt="Service 3">
                <div class="card-body">
                    <h5 class="card-title">Hébergement</h5>
                    <p class="card-text">Solutions d'hébergement performantes et sécurisées.</p>
                </div>
                <div class="card-footer">
                    <a href="#" class="btn btn-outline-primary w-100">Découvrir</a>
                </div>
            </div>
        </div>
    </div>
</div>

Classes importantes de la Card

Classe	Rôle
`.card`	Conteneur principal de la carte
`.card-img-top`	Image en haut de la carte
`.card-body`	Zone de contenu principal
`.card-title`	Titre de la carte
`.card-text`	Texte descriptif de la carte
`.card-footer`	Pied de carte (optionnel)
`.card-header`	En-tête de carte (optionnel)
`.h-100`	Hauteur 100% pour égaliser les cartes dans une grille

Button

Les boutons Bootstrap offrent des styles prédéfinis avec différentes couleurs, tailles et variantes.

Mise en contexte

Les boutons sont omniprésents dans les interfaces web : formulaires, appels à l'action, navigation, etc. Bootstrap propose un système complet de boutons stylisés qui respectent une charte graphique cohérente et qui sont accessibles nativement.

Exemple pratique : variantes de couleurs

html

<!-- Boutons pleins (solid) -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>

<!-- Boutons avec contour (outline) -->
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>

Exemple pratique : tailles de boutons

html

<!-- Tailles -->
<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>

<!-- Bouton pleine largeur -->
<button class="btn btn-primary w-100">Bouton pleine largeur</button>

<!-- Bouton désactivé -->
<button class="btn btn-primary" disabled>Désactivé</button>

Couleurs thématiques de Bootstrap

Classe	Couleur	Utilisation typique
`.btn-primary`	Bleu	Action principale
`.btn-secondary`	Gris	Action secondaire
`.btn-success`	Vert	Confirmation, succès
`.btn-danger`	Rouge	Suppression, erreur
`.btn-warning`	Jaune	Avertissement
`.btn-info`	Cyan	Information
`.btn-light`	Clair	Bouton léger sur fond sombre
`.btn-dark`	Sombre	Bouton sombre sur fond clair

Carousel

Le Carousel est un diaporama qui fait défiler automatiquement ou manuellement des images ou du contenu.

Mise en contexte

Les carrousels sont fréquemment utilisés pour des bannières d'accueil, des galeries d'images ou des témoignages clients. Le composant Carousel de Bootstrap gère automatiquement le défilement, les contrôles de navigation et les indicateurs.

Exemple pratique

html

<div id="monCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- Indicateurs -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#monCarousel" 
                data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#monCarousel" 
                data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#monCarousel" 
                data-bs-slide-to="2"></button>
    </div>

    <!-- Slides -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://placehold.co/1200x400/3498db/ffffff?text=Slide+1" 
                 class="d-block w-100" alt="Slide 1">
            <div class="carousel-caption d-none d-md-block">
                <h5>Premier slide</h5>
                <p>Description du premier slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://placehold.co/1200x400/2ecc71/ffffff?text=Slide+2" 
                 class="d-block w-100" alt="Slide 2">
            <div class="carousel-caption d-none d-md-block">
                <h5>Deuxième slide</h5>
                <p>Description du deuxième slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://placehold.co/1200x400/e74c3c/ffffff?text=Slide+3" 
                 class="d-block w-100" alt="Slide 3">
            <div class="carousel-caption d-none d-md-block">
                <h5>Troisième slide</h5>
                <p>Description du troisième slide.</p>
            </div>
        </div>
    </div>

    <!-- Contrôles précédent/suivant -->
    <button class="carousel-control-prev" type="button" 
            data-bs-target="#monCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        <span class="visually-hidden">Précédent</span>
    </button>
    <button class="carousel-control-next" type="button" 
            data-bs-target="#monCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
        <span class="visually-hidden">Suivant</span>
    </button>
</div>

Classes importantes du Carousel

Classe	Rôle
`.carousel`	Conteneur principal du carrousel
`.carousel-inner`	Conteneur des slides
`.carousel-item`	Chaque slide individuel
`.carousel-caption`	Texte superposé sur le slide
`.carousel-control-prev/next`	Boutons précédent/suivant
`.carousel-indicators`	Indicateurs de position (petits points)
`data-bs-ride="carousel"`	Active le défilement automatique

Note : Un seul carousel-item doit avoir la classe .active au chargement de la page. Les attributs data-bs-target des contrôles et indicateurs doivent correspondre à l'id du carrousel.

Classes utilitaires de mise en forme

Définition

Les classes utilitaires de Bootstrap sont des classes CSS préconçues à usage unique qui permettent d'appliquer rapidement des styles courants (espacement, couleurs, affichage, texte, etc.) sans écrire de CSS personnalisé. Elles suivent une convention de nommage cohérente et intuitive.

Espacement (Margin et Padding)

La syntaxe des classes d'espacement suit le format : {propriété}{côté}-{taille}

Lettre	Propriété
`m`	margin
`p`	padding

Lettre	Côté
`t`	top (haut)
`b`	bottom (bas)
`s`	start / left (gauche)
`e`	end / right (droite)
`x`	gauche et droite
`y`	haut et bas
(rien)	les 4 côtés

Taille	Valeur
`0`	0
`1`	0.25rem
`2`	0.5rem
`3`	1rem
`4`	1.5rem
`5`	3rem
`auto`	auto

html

<!-- Exemples d'espacement -->
<div class="mt-3">Margin top de 1rem</div>
<div class="mb-5">Margin bottom de 3rem</div>
<div class="px-4">Padding gauche et droite de 1.5rem</div>
<div class="p-3">Padding de 1rem sur les 4 côtés</div>
<div class="mx-auto" style="width: 300px;">Centré horizontalement</div>

Couleurs de texte et de fond

html

<!-- Couleurs de texte -->
<p class="text-primary">Texte en bleu (primary)</p>
<p class="text-success">Texte en vert (success)</p>
<p class="text-danger">Texte en rouge (danger)</p>
<p class="text-warning">Texte en jaune (warning)</p>
<p class="text-muted">Texte grisé (muted)</p>
<p class="text-white bg-dark">Texte blanc sur fond sombre</p>

<!-- Couleurs de fond -->
<div class="bg-primary text-white p-3">Fond bleu</div>
<div class="bg-success text-white p-3">Fond vert</div>
<div class="bg-light text-dark p-3">Fond clair</div>
<div class="bg-dark text-white p-3">Fond sombre</div>

Alignement de texte

html

<p class="text-start">Texte aligné à gauche</p>
<p class="text-center">Texte centré</p>
<p class="text-end">Texte aligné à droite</p>

<!-- Alignement responsive -->
<p class="text-center text-md-start">Centré sur mobile, à gauche sur tablette et plus</p>

Affichage (Display)

html

<!-- Cacher/Afficher selon le breakpoint -->
<div class="d-none">Caché sur tous les écrans</div>
<div class="d-none d-md-block">Caché sur mobile, visible sur tablette et plus</div>
<div class="d-block d-lg-none">Visible sur mobile et tablette, caché sur desktop</div>

<!-- Types d'affichage -->
<div class="d-flex">Conteneur Flex</div>
<div class="d-inline">Élément inline</div>
<div class="d-block">Élément block</div>

Flexbox utilitaires

html

<!-- Alignement avec Flexbox -->
<div class="d-flex justify-content-between">
    <span>Gauche</span>
    <span>Droite</span>
</div>

<div class="d-flex justify-content-center">
    <span>Centré</span>
</div>

<div class="d-flex align-items-center" style="height: 100px;">
    <span>Centré verticalement</span>
</div>

<!-- Direction -->
<div class="d-flex flex-column">
    <span>Élément 1</span>
    <span>Élément 2</span>
</div>

Bordures et coins arrondis

html

<!-- Bordures -->
<div class="border p-3">Bordure complète</div>
<div class="border-top p-3">Bordure en haut seulement</div>
<div class="border border-primary p-3">Bordure bleue</div>
<div class="border border-2 border-danger p-3">Bordure rouge épaisse</div>

<!-- Coins arrondis -->
<div class="rounded p-3 bg-light">Coins arrondis</div>
<div class="rounded-pill p-3 bg-light">Forme de pilule</div>
<div class="rounded-circle bg-primary text-white p-3" 
     style="width: 80px; height: 80px;">Cercle</div>

Ombres

html

<div class="shadow-sm p-3 mb-3">Ombre légère</div>
<div class="shadow p-3 mb-3">Ombre normale</div>
<div class="shadow-lg p-3 mb-3">Ombre prononcée</div>

Largeur et hauteur

html

<div class="w-25 bg-light p-2">25% de largeur</div>
<div class="w-50 bg-light p-2">50% de largeur</div>
<div class="w-75 bg-light p-2">75% de largeur</div>
<div class="w-100 bg-light p-2">100% de largeur</div>

Points importants

Les classes utilitaires suivent une convention de nommage cohérente et prévisible
Elles peuvent être combinées librement pour créer des mises en forme complexes
Les classes responsive (ex. d-none d-md-block) permettent d'adapter l'affichage selon le breakpoint
Privilégier les classes utilitaires Bootstrap plutôt que du CSS personnalisé pour les styles courants

Formulaires Bootstrap

Bootstrap fournit un ensemble complet de classes pour la mise en forme des formulaires HTML. Ces classes améliorent l'apparence des champs de saisie, des cases à cocher, des boutons radio et d'autres éléments de formulaire, tout en maintenant un design cohérent et accessible.

Exemple de base

html

<form>
    <!-- Champ texte -->
    <div class="mb-3">
        <label for="nom" class="form-label">Nom complet</label>
        <input type="text" class="form-control" id="nom" placeholder="Entrez votre nom">
    </div>

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

    <!-- Champ mot de passe -->
    <div class="mb-3">
        <label for="motdepasse" class="form-label">Mot de passe</label>
        <input type="password" class="form-control" id="motdepasse">
    </div>

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

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

Select (liste déroulante)

html

<div class="mb-3">
    <label for="province" class="form-label">Province</label>
    <select class="form-select" id="province">
        <option selected>Choisir une province...</option>
        <option value="QC">Québec</option>
        <option value="ON">Ontario</option>
        <option value="BC">Colombie-Britannique</option>
    </select>
</div>

Cases à cocher et boutons radio

html

<!-- Cases à cocher -->
<div class="mb-3">
    <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">
        <label class="form-check-label" for="check2">Option 2</label>
    </div>
</div>

<!-- Boutons radio -->
<div class="mb-3">
    <div class="form-check">
        <input class="form-check-input" type="radio" name="choix" id="radio1">
        <label class="form-check-label" for="radio1">Choix A</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="choix" id="radio2">
        <label class="form-check-label" for="radio2">Choix B</label>
    </div>
</div>

Colonnes

html

<!-- Formulaire en grille (plusieurs colonnes) -->
<form>
    <div class="row mb-3">
        <div class="col-md-6">
            <label for="prenom" class="form-label">Prénom</label>
            <input type="text" class="form-control" id="prenom">
        </div>
        <div class="col-md-6">
            <label for="nomFamille" class="form-label">Nom de famille</label>
            <input type="text" class="form-control" id="nomFamille">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-md-8">
            <label for="ville" class="form-label">Ville</label>
            <input type="text" class="form-control" id="ville">
        </div>
        <div class="col-md-4">
            <label for="codePostal" class="form-label">Code postal</label>
            <input type="text" class="form-control" id="codePostal">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Enregistrer</button>
</form>

Input Group

html

<div class="mb-3">
    <label for="site" class="form-label">Site web</label>
    <div class="input-group">
        <span class="input-group-text">https://</span>
        <input type="text" class="form-control" id="site" placeholder="www.exemple.com">
    </div>
</div>

<div class="mb-3">
    <label for="prix" class="form-label">Prix</label>
    <div class="input-group">
        <span class="input-group-text">$</span>
        <input type="number" class="form-control" id="prix">
        <span class="input-group-text">.00</span>
    </div>
</div>

Validation visuelle

html

<!-- Champ valide -->
<div class="mb-3">
    <label for="emailValide" class="form-label">Courriel</label>
    <input type="email" class="form-control is-valid" id="emailValide" value="test@email.com">
    <div class="valid-feedback">Excellent !</div>
</div>

<!-- Champ invalide -->
<div class="mb-3">
    <label for="emailInvalide" class="form-label">Courriel</label>
    <input type="email" class="form-control is-invalid" id="emailInvalide" value="email-invalide">
    <div class="invalid-feedback">Veuillez entrer une adresse courriel valide.</div>
</div>

Classes importantes des formulaires

Classe	Rôle
`.form-control`	Style pour les champs `input`, `textarea`
`.form-select`	Style pour les listes déroulantes `select`
`.form-label`	Style pour les étiquettes `label`
`.form-check`	Conteneur pour checkbox et radio
`.form-check-input`	Style pour les checkbox et radio
`.form-check-label`	Étiquette pour checkbox et radio
`.input-group`	Groupe un champ avec des textes ou boutons
`.input-group-text`	Texte ou icône ajouté avant/après un champ
`.is-valid` / `.is-invalid`	Indique visuellement si un champ est valide ou non

Points importants

Toujours utiliser .form-control sur les <input> et <textarea> pour obtenir le style Bootstrap
Utiliser .form-select pour les <select> au lieu de .form-control
Chaque champ devrait être accompagné d'un <label> avec la classe .form-label pour l'accessibilité
Grouper les champs dans des <div class="mb-3"> pour un espacement cohérent

Bootstrap Icons (Icônes)

Bootstrap Icons est une bibliothèque d'icônes SVG gratuite et open source fournie par l'équipe Bootstrap. Elle contient plus de 2 000 icônes qui peuvent être utilisées dans vos projets web via un CDN, des fichiers SVG ou une police d'icônes (icon font).

Installation via CDN

Ajoutez cette ligne dans le <head> de votre page HTML, en plus du CSS de Bootstrap :

html

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

Utilisation des icônes

Les icônes s'ajoutent avec une balise <i> et les classes bi bi-{nom-icone} :

html

<!-- Icônes simples -->
<i class="bi bi-house"></i> Accueil
<i class="bi bi-envelope"></i> Contact
<i class="bi bi-telephone"></i> Téléphone
<i class="bi bi-search"></i> Rechercher
<i class="bi bi-cart"></i> Panier
<i class="bi bi-person"></i> Profil

<!-- Icônes dans un bouton -->
<button class="btn btn-primary">
    <i class="bi bi-download"></i> Télécharger
</button>

<!-- Icônes dans la navigation -->
<a class="nav-link" href="#">
    <i class="bi bi-house-door"></i> Accueil
</a>

Personnalisation de la taille et de la couleur

Les icônes héritent de la taille de police et de la couleur du texte parent. Vous pouvez les personnaliser avec les classes utilitaires Bootstrap :

html

<!-- Taille via font-size -->
<i class="bi bi-star-fill fs-1"></i>  <!-- Très grand -->
<i class="bi bi-star-fill fs-3"></i>  <!-- Grand -->
<i class="bi bi-star-fill fs-5"></i>  <!-- Normal -->
<i class="bi bi-star-fill fs-6"></i>  <!-- Petit -->

<!-- Couleurs avec les classes Bootstrap -->
<i class="bi bi-heart-fill text-danger"></i>   <!-- Rouge -->
<i class="bi bi-check-circle-fill text-success"></i>  <!-- Vert -->
<i class="bi bi-exclamation-triangle-fill text-warning"></i>  <!-- Jaune -->
<i class="bi bi-info-circle-fill text-info"></i>  <!-- Cyan -->

Exemple pratique : icônes dans un formulaire

html

<form>
    <div class="mb-3">
        <label for="rechercheIcon" class="form-label">Recherche</label>
        <div class="input-group">
            <span class="input-group-text"><i class="bi bi-search"></i></span>
            <input type="text" class="form-control" id="rechercheIcon" 
                   placeholder="Rechercher...">
        </div>
    </div>
    <div class="mb-3">
        <label for="emailIcon" class="form-label">Courriel</label>
        <div class="input-group">
            <span class="input-group-text"><i class="bi bi-envelope"></i></span>
            <input type="email" class="form-control" id="emailIcon" 
                   placeholder="votre@courriel.com">
        </div>
    </div>
</form>

Trouver des icônes

Consultez la bibliothèque complète des icônes disponibles sur le site officiel : https://icons.getbootstrap.com/

Vous pouvez y rechercher des icônes par nom ou par catégorie.

Variables root CSS de Bootstrap

Les variables root CSS (ou CSS custom properties) sont des variables définies dans le sélecteur :root qui permettent de stocker des valeurs réutilisables dans votre CSS. Bootstrap utilise intensivement ces variables pour définir ses couleurs, tailles, espacements et autres propriétés de base.

Comment fonctionnent les variables root dans Bootstrap

Bootstrap définit des centaines de variables CSS dans le sélecteur :root. Ces variables sont utilisées pour :

Les couleurs du thème (primaire, secondaire, succès, danger, etc.)
Les tailles de police et d'espacement
Les bordures et les ombres
Les points de rupture (breakpoints)

Syntaxe : Toutes les variables Bootstrap commencent par --bs- suivi du nom de la propriété (ex: --bs-primary, --bs-font-size-base).

Voici quelques exemples de variables importantes :

css

:root {
  /* Couleurs principales */
  --bs-primary: #0d6efd;      /* Bleu primaire */
  --bs-secondary: #6c757d;    /* Gris secondaire */
  --bs-success: #198754;      /* Vert succès */
  --bs-danger: #dc3545;       /* Rouge danger */
  --bs-warning: #ffc107;      /* Jaune avertissement */
  --bs-info: #0dcaf0;         /* Cyan info */
  
  /* Couleurs de fond et de texte */
  --bs-body-color: #212529;   /* Couleur du texte */
  --bs-body-bg: #fff;         /* Couleur de fond */
  
  /* Tailles */
  --bs-font-size-base: 1rem;  /* Taille de police de base */
  --bs-border-radius: 0.375rem; /* Rayon des bordures */
}

Variables disponibles

Bootstrap expose des centaines de variables. Les plus utiles pour la personnalisation sont :

Couleurs :

--bs-primary, --bs-secondary, --bs-success, etc.
--bs-body-bg, --bs-body-color
--bs-border-color, --bs-border-radius

Typographie :

--bs-font-family-base, --bs-font-size-base
--bs-line-height-base

Espacement :

--bs-spacer (valeur de base pour les marges/paddings)

Points de rupture :

--bs-breakpoint-sm, --bs-breakpoint-md, etc.

Consultez la documentation complète : https://getbootstrap.com/docs/5.3/customize/css-variables/

Personnalisation des variables CSS de Bootstrap

Il arrive souvent que vous souhaitiez adapter les couleurs de Bootstrap à votre charte graphique : c'est normal, car les couleurs par défaut sont génériques et limitées.

Pour personnaliser Bootstrap selon vos couleurs, vous pouvez redéfinir ces variables avant d'importer Bootstrap.

Exemple 1 (lorsque Bootstrap est importé via CDN)

Créez un fichier custom.css et placez-le avant Bootstrap dans votre HTML :

Note : Le nom custom.css est arbitraire. Vous auriez tout aussi bien pu utiliser styles.css, theme.css ou n'importe quel autre nom de fichier CSS. L'important est que ce fichier soit chargé avant Bootstrap dans votre HTML.

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site personnalisé</title>
    <!-- Votre CSS personnalisé AVANT Bootstrap -->
    <link href="css/custom.css" rel="stylesheet">
    <!-- CSS Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>
<body>
    <!-- Votre contenu -->
</body>
</html>

Dans custom.css, redéfinissez les variables :

css

/* custom.css */
:root {
  /* Redéfinition des couleurs primaires */
  --bs-primary: #8b5cf6;        /* Violet personnalisé */
  --bs-primary-rgb: 139, 92, 246; /* Version RGB pour les dégradés */
  
  --bs-secondary: #64748b;      /* Gris-bleu */
  --bs-secondary-rgb: 100, 116, 139;
  
  /* Couleurs sémantiques */
  --bs-success: #10b981;        /* Vert émeraude */
  --bs-danger: #ef4444;         /* Rouge personnalisé */
  --bs-warning: #f59e0b;        /* Orange */
  --bs-info: #06b6d4;           /* Cyan */
  
  /* Couleur de fond et texte */
  --bs-body-bg: #f8fafc;        /* Fond légèrement gris */
  --bs-body-color: #1e293b;     /* Texte sombre */
}

Exemple 2 : lorsqu'on utilise Bootstrap en local (fichiers locaux)

Tout dépendannt de votre installation locale, vous pouvez soit :

Redéfinir les variables dans votre propre fichier CSS (ex: custom.css) et l'importer avant Bootstrap dans votre HTML
Ou, si vous utilisez la version Sass de Bootstrap, redéfinir les variables dans un fichier Sass avant d'importer les fichiers Sass de Bootstrap, puis compiler votre propre CSS personnalisé.

Dans le TP2, c'est le cas pour le Sass (Scss) : vous avez un projet de départ qui contient déjà un fichier Styles.scss, dans lequel vous pouvez redéfinir les variables avant la ligne qui importe Bootstrap.

Exemple :

scss

/* Styles.scss */
/* Redéfinition des variables avant l'import de Bootstrap */
:root {
  --bs-primary: #8b5cf6;        /* Violet personnalisé */
  --bs-secondary: #64748b;      /* Gris-bleu */
  --bs-body-bg: #f8fafc;        /* Fond légèrement gris */
  --bs-body-color: #1e293b;     /* Texte sombre */
}

/* Import de Bootstrap (assurez-vous que le chemin est correct) */
@import "partials/_bootstrap.scss";

/* Votre CSS personnalisé après l'import de Bootstrap */
[... votre CSS personnalisé ...]

Résumé

Bootstrap est un framework front-end qui fournit des composants, une grille et des classes utilitaires pour créer des sites web responsifs rapidement
Il s'intègre via CDN (rapide, nécessite internet) ou en local (contrôle total, fonctionne hors ligne)
Le système de grille repose sur 12 colonnes avec les classes .container, .row et .col-*
Les breakpoints (sm, md, lg, xl, xxl) permettent d'adapter la mise en page selon la taille de l'écran en approche mobile-first
Les composants (Navbar, Dropdown, Card, Button, Carousel) sont prêts à l'emploi avec des classes CSS et des attributs data-bs-* pour le JavaScript
Les classes utilitaires (espacement, couleurs, affichage, flexbox, bordures) permettent de styliser rapidement sans CSS personnalisé
Les formulaires Bootstrap utilisent les classes .form-control, .form-select, .form-check et .input-group
Bootstrap Icons est une bibliothèque séparée ajoutée via CDN, utilisant les classes bi bi-{nom}
Les variables root CSS permettent de personnaliser les couleurs et le thème de Bootstrap en redéfinissant les variables avant l'import du framework

Exercices pratiques

Exercice 1 : Intégration complète avec Bootstrap

Objectif : Reproduire une page web en utilisant uniquement les classes Bootstrap, sans CSS personnalisé.

Consignes :

Téléchargez les fichiers de départ : 📦 Télécharger les fichiers de départ
- Ce dossier contient une page index.html avec son styles css et des images.
Copier index.html vers index2.html.
Intégrez Bootstrap via CDN dans le <head> et retirer le lien vers styles.css.
À partir d'ici, il n'y a plus de CSS personnalisé. Votre tâche est de remplacer toutes les classes CSS personnalisées par des classes Bootstrap équivalentes pour recréer le design de la page.

Attention : N'essayer pas que tout soit parfaitement identique. Même en utilisant le plus précisément possible les classes Bootstrap, il n'est pas possible de reproduire exactement le même design sans CSS personnalisé. L'objectif est de se rapprocher le plus possible du design original en utilisant les classes Bootstrap.

Résultat attendu : Une page qui ressemble le plus possible à l'original, mais réalisée uniquement avec Bootstrap.

Astuces :

Pour la mise en page générale : Utiliser les classes de conteneur (.container), du padding (.p-*) et de l'espacement (.mb-*, .mt-*, etc.)
Pour le header : Penser à utiliser des classes en lien avec flexbox
Pour la navigation : Regarder la composante Navbar de Bootstrap
Pour les sections : Utilisez .row pour une rangée, et .col-6 pour diviser en deux colonnes
Pour les boutons des saisons : Regarder les classes de boutons et les couleurs thématiques
Pour le formulaire : Laisser tel quel OU (optionel) : Utiliser les classes de formulaire Bootstrap pour styliser les champs et le bouton d'envoi

Exercice 2 : Utilisation de la grille Bootstrap avec carousels

Objectif : Créer une page web responsive utilisant la grille Bootstrap avec des carousels d'images, en exploitant les points de rupture pour un affichage adapté aux différentes résolutions.

Avant de commencer

Assurez-vous que tout le code pris sur Bootstrap soi issu de la version 5.3 ou plus récente, car les classes et la syntaxe peuvent différer des versions précédentes.

Pour cet exercice, utiliser Bootstrap via CDN. Simplement suivre les instructions du Quikstart : https://getbootstrap.com/docs/5.3/getting-started/introduction/#quick-start

Étapes :

Créez une page web complète avec header, nav, main et footer.
Le tout doit être contenu dans un container Bootstrap. (https://getbootstrap.com/docs/5.0/layout/containers/)
Dans le main, implémentez :
- Une rangée avec une section hero inspirée de ceci (https://getbootstrap.com/docs/5.0/examples/heroes/) contenant un titre de page plus gros et un paragraphe centré et 2 boutons.
- En dessous, une rangée avec deux colonnes, chaque colonne contenant un titre h2, un paragraphe et un carousel d'images. Au moins 2 images.
Les images des carousels sont à votre choix : mais harmonisez la largeur des deux carousels (utilisez des images de mêmes dimensions ou encore des règles CSS appropriées pour forcer la largeur).
Comportement responsive : utiliser le système de grille (bootstrap grid https://getbootstrap.com/docs/5.0/layout/grid/#grid-options)
- Sur les résolutions LG et plus : Affichage normal (deux colonnes).
- Sur les résolutions MD et plus : Affichage normal (deux colonnes).
- En dessous de MD (résolutions SM et XS) : Tout se stack sur une seule colonne.

Résultat attendu : Une page web responsive avec une section hero et deux carousels d'images, utilisant la grille Bootstrap pour un affichage adapté à différentes résolutions.

Par exemple, sur un écran d'une largeur de 1000px : alt text

Par exemple, sur un écran d'une largeur de 600px : Exemple 600px

Exercice 3 : Création d'un formulaire d'inscription avec Bootstrap

Objectif : Créer un formulaire d'inscription responsive utilisant les classes de formulaire Bootstrap.

Consignes :

Créez une page SignUp.html qui utilise Bootstrap via CDN.
Le formulaire doit être organisé en deux colonnes :
- Colonne gauche : prénom, nom, courriel
- Colonne droite : pseudo désiré, mot de passe, confirmer le mot de passe
En bas du formulaire, à droite : boutons "S'inscrire" et "Reset"
Afin d'avoir le bon visuel du formulaire des controles, vous devez utiliser des classes de formulaire Bootstrap (ex: form-control, form-label, etc.). Voir la section "Formulaires Bootstrap" de ce cours pour les classes à utiliser.
Sous le formulaire, ajoutez deux icônes avec des liens (liens vides pour l'instant) :
- "J'ai déjà un compte"
- "Besoin d'aide?"
Les icônes doivent être centrées et côte à côte en dessous du formulaire.
- Il faut utiliser la librairie Bootstrap Icons pour les icônes (https://icons.getbootstrap.com/)

Résultat attendu : Un formulaire d'inscription bien structuré et responsive utilisant les classes Bootstrap.

alt text

Vérifications des connaissances

Testez vos connaissances acquises dans ce cours en répondant aux questions suivantes. Cliquez sur chaque question pour révéler la réponse.

Question 1

Quelle est la différence entre intégrer Bootstrap via CDN et en local ?

Réponse

CDN : Les fichiers sont chargés depuis un serveur distant. Mise en place très rapide (ajout de liens dans le HTML), mais nécessite une connexion internet.
Local : Les fichiers sont téléchargés et placés dans le projet. Fonctionne hors ligne et offre un contrôle total, mais nécessite plus de configuration initiale.

Dans les deux cas, il faut inclure le CSS dans le <head> et le JavaScript avant la fermeture de </body>.

Question 2

Combien de colonnes contient le système de grille Bootstrap et quelle est la hiérarchie des éléments ?

Réponse

Le système de grille Bootstrap est basé sur 12 colonnes. La hiérarchie obligatoire est :

Container (.container ou .container-fluid) — enveloppe le tout
Row (.row) — crée une rangée horizontale
Colonnes (.col-*) — définissent la largeur des éléments

html

<div class="container">
    <div class="row">
        <div class="col-6">50%</div>
        <div class="col-6">50%</div>
    </div>
</div>

Question 3

Quelle est la syntaxe des variables CSS utilisées par Bootstrap ?

Réponse

Toutes les variables Bootstrap commencent par --bs- suivi du nom de la propriété. Par exemple :

--bs-primary pour la couleur primaire
--bs-font-size-base pour la taille de police de base
--bs-border-radius pour le rayon des bordures

Ces variables sont définies dans le sélecteur :root de Bootstrap.

Question 4

Comment personnaliser les couleurs de Bootstrap en utilisant les variables root CSS ?

Réponse

Pour personnaliser les couleurs, créez un fichier CSS personnalisé (par exemple custom.css) et redéfinissez les variables dans le sélecteur :root avant d'importer Bootstrap :

css

:root {
  --bs-primary: #votre-couleur;
  --bs-secondary: #votre-couleur;
  /* etc. */
}

Puis chargez ce fichier CSS avant Bootstrap dans votre HTML :

html

<link href="css/custom.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Question 5

Pourquoi est-il important de charger le fichier CSS personnalisé avant Bootstrap ?

Réponse

Les variables CSS doivent être définies avant leur utilisation. Si vous chargez Bootstrap avant votre fichier personnalisé, les variables Bootstrap prendront leurs valeurs par défaut et vos personnalisations ne seront pas appliquées.

L'ordre correct est :

Votre CSS personnalisé (avec les variables redéfinies)
CSS de Bootstrap (qui utilise les variables)

Cela permet à Bootstrap d'utiliser vos valeurs personnalisées au lieu des valeurs par défaut.

Question 6

Quelle classe Bootstrap permet de gérer comment l'affichage d'une colonne va se comporter pour une résolution moyenne (Medium) d'environ 900 px ?

Réponse

Pour une résolution moyenne d'environ 900px, on utilise les classes col-md-* où * représente le nombre de colonnes sur 12.

Par exemple :

.col-md-6 : occupe 6 colonnes sur 12 (50% de largeur) à partir de 768px
.col-md-4 : occupe 4 colonnes sur 12 (33.33% de largeur) à partir de 768px

Le breakpoint md (medium) de Bootstrap correspond à ≥768px. Une résolution de 900px active donc les classes md.

Question 7

Soit 4 colonnes à 25% de largeur. On veut que, lorsque le navigateur aura moins de 768px (point de rupture pour Medium), les colonnes soient à 50%. Au dessus de 768px, elles sont à 25%. Quelles classes utiliser sur ces colonnes pour assurer ce comportement ?

Réponse

Il faut utiliser les classes col-6 col-md-3 sur chaque colonne.

Explication :

col-6 : En-dessous de 768px, chaque colonne occupe 6/12 = 50% de largeur (2 colonnes par ligne)
col-md-3 : À partir de 768px, chaque colonne occupe 3/12 = 25% de largeur (4 colonnes par ligne)

Code HTML :

html

<div class="container">
    <div class="row">
        <div class="col-6 col-md-3">Colonne 1</div>
        <div class="col-6 col-md-3">Colonne 2</div>
        <div class="col-6 col-md-3">Colonne 3</div>
        <div class="col-6 col-md-3">Colonne 4</div>
    </div>
</div>

Module 7 : Bootstrap - Framework CSS pour le développement web ​

Introduction ​

Objectifs du cours ​

Qu'est-ce qu'un framework front-end ? ​

Définition ​

Avantages de Bootstrap ​

CDN vs Local : deux façons d'intégrer Bootstrap ​

Comparaison CDN vs Local ​

Utilisation de Bootstrap ​

Définition ​

Exemple pratique : page web simple avec Bootstrap via CDN ​

Liens vers la documentation Bootstrap ​

Le système de grille (Grid System) ​

Définition ​

Structure de base ​

Exemples de mise en page avec les colonnes ​

Points importants ​

Points de rupture (Breakpoints) et grille responsive ​

Définition ​

Les 6 breakpoints de Bootstrap ​

Utilisation des breakpoints avec la grille ​

Comportement des breakpoints ​

Exemple concret : galerie d'images responsive ​

Points importants ​

Composants Bootstrap ​

Définition ​

Navbar ​

Mise en contexte ​

Exemple pratique ​

Classes importantes de la Navbar ​

Dropdown ​

Mise en contexte ​

Exemple pratique : Dropdown simple ​

Exemple pratique : Dropdown dans une Navbar ​

Classes importantes du Dropdown ​

Card ​

Mise en contexte ​

Exemple pratique : carte simple ​

Exemple pratique : grille de cartes ​

Classes importantes de la Card ​

Button ​

Mise en contexte ​

Exemple pratique : variantes de couleurs ​

Exemple pratique : tailles de boutons ​

Couleurs thématiques de Bootstrap ​

Carousel ​

Mise en contexte ​

Exemple pratique ​

Classes importantes du Carousel ​

Classes utilitaires de mise en forme ​

Définition ​

Espacement (Margin et Padding) ​

Couleurs de texte et de fond ​

Alignement de texte ​

Affichage (Display) ​

Flexbox utilitaires ​

Bordures et coins arrondis ​

Ombres ​

Largeur et hauteur ​

Points importants ​

Formulaires Bootstrap ​

Exemple de base ​

Select (liste déroulante) ​

Cases à cocher et boutons radio ​

Colonnes ​

Input Group ​

Validation visuelle ​

Classes importantes des formulaires ​

Points importants ​

Bootstrap Icons (Icônes) ​

Installation via CDN ​

Utilisation des icônes ​

Personnalisation de la taille et de la couleur ​

Exemple pratique : icônes dans un formulaire ​

Trouver des icônes ​

Variables root CSS de Bootstrap ​

Comment fonctionnent les variables root dans Bootstrap ​

Variables disponibles ​

Personnalisation des variables CSS de Bootstrap ​

Résumé ​

Module 7 : Bootstrap - Framework CSS pour le développement web

Introduction

Objectifs du cours

Qu'est-ce qu'un framework front-end ?

Définition

Avantages de Bootstrap

CDN vs Local : deux façons d'intégrer Bootstrap

Comparaison CDN vs Local

Utilisation de Bootstrap

Définition

Exemple pratique : page web simple avec Bootstrap via CDN

Liens vers la documentation Bootstrap

Le système de grille (Grid System)

Définition

Structure de base

Exemples de mise en page avec les colonnes

Points importants

Points de rupture (Breakpoints) et grille responsive

Définition

Les 6 breakpoints de Bootstrap

Utilisation des breakpoints avec la grille

Comportement des breakpoints

Exemple concret : galerie d'images responsive

Points importants

Composants Bootstrap

Définition

Navbar

Mise en contexte

Exemple pratique

Classes importantes de la Navbar

Dropdown

Mise en contexte

Exemple pratique : Dropdown simple

Exemple pratique : Dropdown dans une Navbar

Classes importantes du Dropdown

Card

Mise en contexte

Exemple pratique : carte simple

Exemple pratique : grille de cartes

Classes importantes de la Card

Button

Mise en contexte

Exemple pratique : variantes de couleurs

Exemple pratique : tailles de boutons

Couleurs thématiques de Bootstrap

Carousel

Mise en contexte

Exemple pratique

Classes importantes du Carousel

Classes utilitaires de mise en forme

Définition

Espacement (Margin et Padding)

Couleurs de texte et de fond

Alignement de texte

Affichage (Display)

Flexbox utilitaires

Bordures et coins arrondis

Ombres

Largeur et hauteur

Points importants

Formulaires Bootstrap

Exemple de base

Select (liste déroulante)

Cases à cocher et boutons radio

Colonnes

Input Group

Validation visuelle

Classes importantes des formulaires

Points importants

Bootstrap Icons (Icônes)

Installation via CDN

Utilisation des icônes

Personnalisation de la taille et de la couleur

Exemple pratique : icônes dans un formulaire

Trouver des icônes

Variables root CSS de Bootstrap

Comment fonctionnent les variables root dans Bootstrap

Variables disponibles

Personnalisation des variables CSS de Bootstrap

Résumé