Accueil/Informatique & Développement /Chapitre 03

Bootstrap — la grille et les composants

Un framework CSS : des classes toutes prêtes pour obtenir, en quelques minutes, une page moderne et responsive.

📌

Résumé flash

Bootstrap est une feuille de style déjà écrite qu'on charge via un CDN. Au lieu d'écrire du CSS, on pose des classes. Son cœur est la grille de 12 colonnes : container → row → col-*. Les préfixes (col-md-6) rendent la page responsive selon la largeur de l'écran, en mobile-first. S'y ajoutent des utilitaires (couleurs, marges) et des composants (boutons, cartes, formulaires).

🔑 #framework #CDN #container #row #col-12 #12-colonnes #breakpoint #mobile-first #utilitaires #btn #card #form-control

01Pourquoi un framework CSS

Un framework CSS est une bibliothèque de styles déjà écrits. L'objectif : gagner du temps et obtenir une interface moderne sans tout coder à la main.

Sans framework	Avec un framework
écrire tout le CSS soi-même	tout est déjà prêt
faire le responsive soi-même	responsive automatique
créer chaque composant à la main	classes simples à utiliser
tester chaque navigateur	bonne compatibilité assurée

Les principaux : Bootstrap (le plus répandu, celui du cours), TailwindCSS (classes utilitaires), Bulma, Foundation.

💡 Les meubles en kit

Écrire son CSS à la main, c'est fabriquer chaque meuble depuis la planche de bois : sur mesure, mais long. Bootstrap, c'est le meuble en kit : on assemble des pièces standard, le résultat est propre et solide en une fraction du temps — au prix d'un style un peu « déjà vu ». D'où la dernière étape du chapitre : personnaliser le kit avec son propre CSS.

⚠️ Un framework ne dispense pas de connaître le CSS

Bootstrap est du CSS : col-6 n'est rien d'autre qu'une classe qui applique une largeur. Si vous ne comprenez pas le modèle de boîte ou Flexbox (chapitre CSS), vous saurez poser des classes sans savoir pourquoi ça casse. À l'examen comme en entreprise, c'est le CSS qui est évalué — Bootstrap n'est qu'un accélérateur.

02Intégrer Bootstrap

Un CDN (Content Delivery Network) est un réseau de serveurs répartis dans le monde qui distribue des fichiers rapidement. Plutôt que de télécharger Bootstrap, on pointe vers le CDN officiel — une seule ligne dans le <head> :

html

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

Le <link> charge une feuille de style ; elle doit être lue avant le rendu de la page, donc dans le <head>.

🔧 Corrigé — toujours figer le numéro de version

Le polycopié donne l'adresse sans version :

à éviter

href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css"

Sans numéro, le CDN sert la dernière version publiée. Le jour où Bootstrap change de version majeure, votre site casse tout seul, sans que vous ayez touché à une ligne. On écrit donc toujours bootstrap@5.3.8 — c'est d'ailleurs ce que fait le projet SecurHub rendu en TP.

🔧 Corrigé — le CSS seul ne rend rien interactif

Le cours annonce des « composants interactifs » mais ne donne que le lien CSS. Or le menu déroulant, le bouton « hamburger » de la navbar, les fenêtres modales et les carrousels ont besoin du JavaScript de Bootstrap. Il faut une deuxième ligne, juste avant </body> :

html

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

Sans elle, la navbar reste muette sur mobile — un grand classique de TP.

🌍 Le revers du CDN : plus d'Internet, plus de style

Une page qui charge Bootstrap par CDN ne fonctionne pas hors-ligne : sans réseau, la feuille ne se charge pas et la page s'affiche toute nue. C'est précisément pour cela que ces fiches de révision n'utilisent aucun CDN — elles doivent s'ouvrir dans le train. Pour un projet, l'alternative est de télécharger bootstrap.min.css et de le placer à côté de son HTML.

03La grille 12 colonnes

C'est l'élément le plus important de Bootstrap. Il divise la largeur de l'écran en 12 colonnes imaginaires, et l'on choisit combien de colonnes chaque élément occupe.

Le total des col-* d'une même row doit faire 12. Au-delà, les colonnes en trop passent à la ligne.

Les trois niveaux obligatoires

html

<div class="container">          <!-- 1. centre et limite la largeur -->
    <div class="row">            <!-- 2. une ligne de la grille      -->
        <div class="col-6">Colonne 1</div>   <!-- 3. les colonnes -->
        <div class="col-6">Colonne 2</div>
    </div>
</div>

🧰 Ce que Bootstrap écrit à votre place

row et col-* ne sont pas magiques : c'est du Flexbox. Voici l'équivalent écrit à la main — la démonstration se comporte exactement comme une row de trois col-4 :

css — l'équivalent maison

.row {
  display: flex;
  flex-wrap: wrap;
}
.col-4 {
  flex: 0 0 auto;
  width: 33.3333%;   /* 4 colonnes sur 12 */
  padding: 8px;
}
.col-4 > div {
  background: #2D5A27;
  color: #fff;
  padding: 14px;
  border-radius: 6px;
  text-align: center;
}

Comprendre cela, c'est pouvoir réparer une grille qui déborde — et répondre à la question d'examen « qu'est-ce que fait col-4 ? » autrement que par « ça fait un tiers ».

⚠️ Les trois oublis qui cassent une grille

Pas de row autour des colonnes → les marges négatives n'opèrent pas, l'alignement part de travers.
Un total différent de 12 — trois col-5 font 15 : la troisième bascule à la ligne suivante.
Du contenu directement dans la row : tout enfant d'une row doit être une col-*.

04Le responsive

Un site est consulté sur téléphone, tablette et ordinateur. Plutôt que d'écrire trois versions, Bootstrap propose des préfixes qui indiquent à partir de quelle largeur une règle s'applique. Ce sont les points de rupture (breakpoints).

Classe	Signifie	À partir de	Appareil
`col-*`	par défaut	0 px	Smartphones
`col-sm-*`	small	≥ 576 px	Grands smartphones
`col-md-*`	medium	≥ 768 px	Tablettes
`col-lg-*`	large	≥ 992 px	Ordinateurs
`col-xl-*`	extra large	≥ 1200 px	Grands écrans
`col-xxl-*`	extra-extra large	≥ 1400 px	Très grands écrans

Le polycopié s'arrête à xl ; Bootstrap 5 ajoute xxl.

Le principe « mobile-first »

Bootstrap applique d'abord la classe sans préfixe, puis la remplace dès que l'écran atteint le seuil suivant. On conçoit donc du plus petit vers le plus grand.

Avec class="col-12 col-md-4" : empilées sur mobile, côte à côte dès la tablette. Une seule écriture, deux comportements.

html

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

🧰 Le motif à trois paliers

C'est exactement celui du projet SecurHub rendu en TP :

html

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

Mobile	`col-12` → 1 carte par ligne
Tablette (≥ 768)	`col-md-6` → 2 par ligne
Ordinateur (≥ 992)	`col-lg-3` → 4 par ligne

Trois classes, trois mises en page, zéro ligne de CSS.

⚠️ Le préfixe agit « à partir de », jamais « seulement sur »

L'erreur de raisonnement la plus fréquente : croire que col-md-6 ne concerne que les tablettes. Non — il s'applique à partir de 768 px et au-delà, donc aussi sur ordinateur, tant qu'aucune classe lg ou xl ne prend le relais. C'est le sens de « mobile-first » : chaque palier écrase le précédent, vers le haut.

05Les classes utilitaires

Ce sont de petites classes toutes prêtes qui modifient un détail d'apparence sans écrire de CSS.

Couleurs

Classe	Effet
`text-primary`	texte bleu
`text-danger`	texte rouge
`text-success`	texte vert
`text-secondary`	texte gris
`bg-dark` · `bg-warning`	fond sombre · fond orangé

html

<p class="text-success">Ce texte est vert</p>
<p class="bg-primary text-white p-3">Bloc bleu, texte blanc, espacement intérieur</p>

Marges et espacements

La formule est toujours la même : propriété + côté + intensité.

m (margin) ou p (padding) + côté + 0 à 5

Lettre	Côté
`t`	top — haut
`b`	bottom — bas
`s`	start — début de ligne (gauche en français)
`e`	end — fin de ligne (droite en français)
`x` · `y`	les deux horizontaux · les deux verticaux
(rien)	les quatre côtés

html

<div class="mt-3">Marge en haut</div>
<div class="p-4 bg-light">Padding interne sur les 4 côtés</div>
<div class="mb-5">Grande marge en bas</div>
<div class="py-3">Padding en haut ET en bas</div>

🔧 Corrigé — ml- et mr- n'existent plus

Le polycopié donne l pour left et r pour right. C'était vrai en Bootstrap 4. Depuis Bootstrap 5 — la version servie par le CDN du cours — ces lettres ont été remplacées par s (start) et e (end), pour gérer les langues écrites de droite à gauche.

Bootstrap 4 (obsolète)	Bootstrap 5 (correct)
`ml-3`	`ms-3`
`mr-3`	`me-3`
`pl-2` · `pr-2`	`ps-2` · `pe-2`

Le symptôme est traître : une classe inexistante ne déclenche aucune erreur — elle ne fait simplement rien. Vous cherchez pendant vingt minutes pourquoi votre marge ne s'applique pas. Si un espacement reste sans effet, vérifiez d'abord cette lettre.

06Les composants

Les boutons

btn est la classe de base, à laquelle on ajoute une couleur.

`btn btn-primary`	bleu — action principale
`btn btn-secondary`	gris — action secondaire
`btn btn-success`	vert — valider
`btn btn-danger`	rouge — supprimer

btn seul ne suffit pas : sans classe de couleur, le bouton est transparent et sans bordure.

Les cartes

Une carte présente une information encadrée : image, titre, texte. C'est le composant roi des sites de produits, blogs et portfolios.

html

<div class="card" style="width: 18rem;">
    <img src="image.jpg" class="card-img-top" alt="Illustration">
    <div class="card-body">
        <h5 class="card-title">Titre</h5>
        <p class="card-text">Description de la carte.</p>
    </div>
</div>

`card`	la carte elle-même (bordure, coins arrondis)
`card-img-top`	image collée en haut
`card-body`	la zone de contenu, avec son padding
`card-title` · `card-text`	titre · paragraphe

Une carte se combine naturellement avec la grille : une card par col-*, et l'on obtient une galerie responsive.

Les formulaires

html

<form>
    <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control" placeholder="Entrez votre email">
    </div>
    <div class="mb-3">
        <label class="form-label">Mot de passe</label>
        <input type="password" class="form-control">
    </div>
    <button class="btn btn-primary">Envoyer</button>
</form>

mb-3 — sépare les champs (marge en bas) ;
form-label — style de l'étiquette ;
form-control — champ pleine largeur, aligné, avec bordure.

⚠️ Bootstrap habille, il ne valide pas

form-control ne fait que styler. Les règles de saisie restent du HTML (required, type="email", minlength) et le name reste indispensable pour que la donnée soit envoyée — voir le chapitre HTML. Un joli formulaire qui n'envoie rien reste un formulaire cassé.

07Personnaliser Bootstrap

Le reproche fait à Bootstrap : tous les sites se ressemblent. La parade est simple — on charge Bootstrap, puis sa propre feuille de style, qui vient par-dessus.

html — l'ordre compte

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">   <!-- APRÈS : c'est lui qui gagne -->

🧰 Agrandir une carte au survol

Le sujet demande d'agrandir légèrement les cartes au survol. Cela n'existe pas dans Bootstrap : c'est du CSS maison, à mettre dans style.css.

css

.card {
  transition: transform .2s;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  width: 180px;
}
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

⚠️ Si votre style ne s'applique pas

Deux causes, dans cet ordre :

L'ordre des <link> — votre CSS doit être chargé après Bootstrap, sinon Bootstrap écrase vos règles.
La spécificité — les sélecteurs de Bootstrap sont parfois plus précis que les vôtres. Un sélecteur plus spécifique (.card.mon-style) règle le problème proprement ; !important est le dernier recours, pas le premier réflexe.

🧠 Auto-évaluation

Vous voulez 4 cartes par ligne sur ordinateur, 2 sur tablette, 1 sur mobile. Quelles classes mettez-vous sur chaque colonne ?

html

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

On raisonne en nombre de colonnes sur 12, du plus petit écran au plus grand : 1 par ligne → 12/1 = 12 ; 2 par ligne → 12/2 = 6 ; 4 par ligne → 12/4 = 3. D'où col-12, col-md-6, col-lg-3.

La formule : col-* = 12 ÷ (nombre d'éléments voulus par ligne).