Accueil/Informatique & Développement /Chapitre 03 /Exercices corrigés

Bootstrap — exercices

Du calcul de colonnes au projet complet du TP, avec les pièges de version qui font perdre une heure.

🎯

Le réflexe à acquérir

Tout part d'une division : col-* = 12 ÷ (éléments voulus par ligne). Et l'on énonce toujours la mise en page du plus petit écran au plus grand — c'est le sens de « mobile-first ».

01Calculer les colonnes

1Combien de colonnes ? Facile

Quelle classe col-* utiliser pour obtenir, sur une même ligne :

2 éléments de largeur égale ?
3 éléments de largeur égale ?
6 éléments de largeur égale ?
Un menu latéral occupant un quart, et un contenu occupant le reste ?
Que se passe-t-il si l'on met trois col-5 dans une même row ?

✅ Correction

Objectif	Calcul	Classe
2 par ligne	12 ÷ 2 = 6	`col-6`
3 par ligne	12 ÷ 3 = 4	`col-4`
6 par ligne	12 ÷ 6 = 2	`col-2`
1/4 + le reste	12 ÷ 4 = 3, reste 9	`col-3` et `col-9`

5. Trois col-5 font 15, soit plus que 12. Les deux premières tiennent sur la ligne (10 colonnes), la troisième bascule à la ligne suivante. Bootstrap ne prévient pas : il enroule (wrap) silencieusement.

⚠️ Le total doit faire 12, pas « au plus » 12

Un total inférieur à 12 est permis et laisse un vide à droite (utile pour centrer). Un total supérieur provoque un retour à la ligne. Quand une carte se retrouve seule en bas sans raison apparente, c'est presque toujours cette addition-là qu'il faut refaire.

02Rendre une grille responsive

2Trois paliers d'affichage Moyen

Écrivez les classes d'une colonne pour chacun de ces comportements.

1 élément par ligne sur mobile, 2 dès la tablette.
1 sur mobile, 2 sur tablette, 4 sur ordinateur.
Toujours 3 par ligne, quelle que soit la taille de l'écran.
2 sur mobile, mais 1 seul (pleine largeur) sur ordinateur. Est-ce possible ?

✅ Correction

html

1.  <div class="col-12 col-md-6">…</div>

2.  <div class="col-12 col-md-6 col-lg-3">…</div>

3.  <div class="col-4">…</div>
    <!-- sans préfixe = à partir de 0 px, donc partout -->

4.  <div class="col-6 col-lg-12">…</div>

4. Oui, c'est possible — et c'est une bonne question de cours. On croit souvent que les colonnes ne peuvent que rétrécir quand l'écran grandit. Faux : chaque palier écrase simplement le précédent. col-6 s'applique dès 0 px, puis col-lg-12 prend le relais à 992 px et repasse en pleine largeur.

🧰 Se relire à voix haute

Un bon test : lire la classe comme une phrase. col-12 col-md-6 col-lg-3 se lit « pleine largeur par défaut, la moitié à partir de la tablette, un quart à partir de l'ordinateur ». Si la phrase a du sens, les classes sont bonnes.

03Débusquer les erreurs

3Quatre bugs à trouver Exigeant

Ce code ne donne pas le résultat attendu. Repérez les quatre problèmes.

html

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
      <p>Bienvenue</p>
      <div class="col-md-6 ml-4">Colonne A</div>
      <div class="col-md-6">Colonne B</div>
  </div>
  <button class="btn">Envoyer</button>
</body>

✅ Correction

#	Problème	Correction
1	L'ordre des feuilles de style : `style.css` est chargé avant Bootstrap, qui l'écrase donc entièrement	mettre `style.css` après le lien Bootstrap
2	CDN sans version : le site cassera au prochain changement de version majeure	`bootstrap@5.3.8`
3	Pas de `row` : les `col-*` sont directement dans le `container`, et un `<p>` traîne au milieu	envelopper les colonnes dans un `<div class="row">`
4	`ml-4` n'existe pas en Bootstrap 5 — la classe est ignorée sans erreur	`ms-4`

Bonus : <button class="btn"> sans classe de couleur donne un bouton transparent et sans bordure. Il faut btn btn-primary.

html — version corrigée

<head>
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
      <p>Bienvenue</p>
      <div class="row">
          <div class="col-md-6 ms-4">Colonne A</div>
          <div class="col-md-6">Colonne B</div>
      </div>
  </div>
  <button class="btn btn-primary">Envoyer</button>
</body>

⚠️ Attention au total après correction

Une fois ms-4 ajouté, deux col-md-6 (= 12) plus une marge à gauche dépassent la largeur de la ligne : la seconde colonne passera à la ligne. Sur une ligne complète, on gère l'espacement avec gap, les classes g-* de Bootstrap, ou un padding interne — pas avec une marge extérieure.

04Une galerie de cartes

4Trois services côte à côte Moyen

D'après le TP : créez une row de 3 colonnes, chacune contenant une carte Bootstrap présentant un service (Réseaux, Sécurité, Cloud) avec un titre et une description. Les cartes doivent s'empiler sur mobile.

✅ Correction

html

<div class="container">
  <div class="row">

    <div class="col-12 col-md-4 mb-3">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Réseaux</h5>
          <p class="card-text">Conception et déploiement d'infrastructures LAN et WAN.</p>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4 mb-3">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Sécurité</h5>
          <p class="card-text">Audit, pare-feu et sensibilisation des utilisateurs.</p>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4 mb-3">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Cloud</h5>
          <p class="card-text">Migration et supervision d'environnements hébergés.</p>
        </div>
      </div>
    </div>

  </div>
</div>

🧰 Deux classes qui changent tout

h-100 sur la carte : elle occupe toute la hauteur de sa colonne. Sans elle, trois cartes aux textes de longueurs différentes ont des hauteurs différentes — et la ligne paraît bancale.
mb-3 sur la colonne : sur mobile, les cartes empilées se toucheraient sans cette marge en bas.

La carte va dans la colonne : la colonne gère la largeur, la carte gère l'apparence. Ne mettez jamais card et col-* sur le même élément.

05Formulaire de contact

5Propre et fonctionnel Moyen

Créez le formulaire de contact du TP : nom, email, message et un bouton d'envoi. Il doit être stylé par Bootstrap et réellement exploitable côté serveur.

✅ Correction

html

<form method="POST" action="/contact">

  <div class="mb-3">
    <label for="nom" class="form-label">Nom</label>
    <input type="text" class="form-control" id="nom" name="nom" required>
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" name="email" required>
  </div>

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

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

⚠️ Ce que Bootstrap ne fait pas pour vous

Les classes form-control et form-label ne gèrent que l'apparence. Restent à votre charge, en HTML pur :

name sur chaque champ — sans lui, rien n'est envoyé ;
for / id pour lier l'étiquette au champ ;
required, type="email" pour la validation ;
method et action sur le <form>.

Un formulaire magnifique sans name envoie des champs vides.

06Le projet complet

6« Entreprise IT & Réseaux » Exigeant

Le sujet du TP : une page projet.html responsive présentant une entreprise d'informatique et réseaux, avec Bootstrap pour la grille et un style.css pour la personnalisation.

Structure de base + Bootstrap par CDN + style.css.
Header : titre centré, slogan en gris, bouton Contact vert.
Présentation : 2 colonnes — image responsive et texte.
Services : 3 colonnes, une carte chacune.
Réalisations : 4 colonnes sur PC, 1 sur mobile.
Formulaire de contact.

✅ Correction — le squelette

html — projet.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Entreprise IT &amp; Réseaux</title>
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<header class="container text-center py-5">
  <h1 class="titre-perso">IT &amp; Réseaux</h1>
  <p class="text-secondary">La confiance au cœur de votre système.</p>
  <a href="#contact" class="btn btn-success">Contact</a>
</header>

<!-- 3. Présentation : 2 colonnes -->
<section class="container mb-5">
  <div class="row align-items-center">
    <div class="col-12 col-md-6 mb-3">
      <img src="equipe.jpg" class="img-fluid rounded" alt="Notre équipe">
    </div>
    <div class="col-12 col-md-6">
      <h2>Qui sommes-nous</h2>
      <p>Nous accompagnons les PME dans leur infrastructure réseau.</p>
    </div>
  </div>
</section>

<!-- 4. Services : 3 cartes -->
<section class="container mb-5">
  <div class="row">
    <div class="col-12 col-md-4 mb-3">
      <div class="card h-100"><div class="card-body">
        <h5 class="card-title">Réseaux</h5>
        <p class="card-text">LAN, WAN, VLAN.</p>
      </div></div>
    </div>
    <!-- … Sécurité, Cloud … -->
  </div>
</section>

<!-- 5. Réalisations : 4 sur PC, 1 sur mobile -->
<section class="container mb-5">
  <div class="row">
    <div class="col-12 col-lg-3 mb-3">
      <img src="p1.jpg" class="img-fluid" alt="Projet 1">
      <h6 class="mt-2">Projet 1</h6>
    </div>
    <!-- … 3 autres … -->
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Et la personnalisation demandée, dans style.css — chargé après Bootstrap :

css — style.css

.titre-perso {
  font-weight: 800;
  color: #2D5A27;
  text-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.card {
  transition: transform .2s;
}
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

🧰 Les classes du sujet, décodées

`text-center`	texte centré
`text-secondary`	gris discret — le slogan
`btn btn-success`	bouton vert
`img-fluid`	image responsive : ne dépasse jamais sa colonne
`py-5`	respiration verticale du header
`align-items-center`	aligne verticalement image et texte

img-fluid est la classe la plus souvent oubliée : sans elle, une photo de 3000 px crève la mise en page sur mobile.