1
Decouvrir Bootstrap
Qu'est-ce que Bootstrap et pourquoi l'utiliser ?Dans cette fiche, vous allez decouvrir Bootstrap 5, le framework CSS le plus populaire au monde. Vous comprendrez ce qu'est un framework CSS, pourquoi il est essentiel dans le developpement web moderne, et comment l'integrer dans vos projets en quelques secondes grace au CDN.
Detail de la fiche
Etape 1Qu'est-ce que Bootstrap ?
Bootstrap est un framework CSS open-source cree par Twitter en 2011. Il fournit des composants preconstruits (boutons, navbars, cartes...) et un systeme de grille responsive sur 12 colonnes. La version 5 a supprime jQuery pour etre plus legere. Des millions de sites l'utilisent dans le monde.
- Framework CSS : fichiers CSS et JS prets a l'emploi, pas besoin de tout ecrire de zero
- 25+ composants : boutons, navbars, cartes, modales, alertes, tableaux...
- Grille 12 colonnes : basee sur Flexbox, 100% responsive et mobile-first
- Bootstrap 5.3+ : sans jQuery, avec variables CSS et couleurs mode sombre
Etape 2Les 2 methodes d'integration
CDN (Recommandee)
Ajouter 2 lignes dans le HTML : un lien CSS dans le <head> et un script JS avant </body>. Ideal pour les projets rapides et l'apprentissage.
Rapide - Simple - Toujours a jour
Installation locale
Installer via npm install bootstrap ou telecharger les fichiers. Ideal pour la production avec personnalisation SASS.
Personnalisable - Hors ligne - Build
★ Structure minimale avec CDN ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Bootstrap 5 - Structure minimale -->
2 <!DOCTYPEhtml>
3 <htmllang="fr">
4 <head>
5 <meta charset="UTF-8"/>
6 <meta name="viewport"/>
7 content="width=device-width, initial-scale=1"
8 <title>Mon site Bootstrap</title>
9 <!-- Bootstrap CSS via CDN -->
10 <link> href="...bootstrap.min.css" rel="stylesheet"</link>
11 </head>
12 <body>
13 <h1>Bonjour Bootstrap !</h1>
14 <!-- Bootstrap JS Bundle -->
15 <script> src="...bootstrap.bundle.min.js" </script>
16 </body>
17 </html>Resultat dans le navigateur
Bonjour Bootstrap !
Texte stylise par Bootstrap CSS
Le CDN charge :
• ~200 Ko de CSS compile (typographie, couleurs, grille)
• ~80 Ko de JS (composants interactifs + Popper)
• Tous les composants sont immediatement disponibles
Cles de lecture
bootstrap.min.css=Fichier CSS compile contenant tous les styles Bootstrap
rel="stylesheet"=Attribut HTML indiquant un fichier CSS a appliquer
bootstrap.bundle.min.js=JS + Popper.js pour dropdowns, modales, tooltips...
name="viewport"=Meta-tag essentiel pour le responsive sur mobile
Etape 3Les avantages
Pourquoi choisir Bootstrap ?
- Gratuit et open-source - Licence MIT, usage commercial autorise
- Facile a apprendre - Documentation excellente, millions d'exemples
- Communaute immense - Templates, plugins, Stack Overflow
- 100% Responsive - Mobile-first, s'adapte a tous les ecrans
- 25+ composants - Boutons, navbars, cartes, modales, alertes...
- Design coherent - Variables CSS, themes sombre/clair
2
Le Systeme de Grille
Comment structurer une mise en page avec la grille ?Le systeme de grille est le coeur de Bootstrap. Vous allez apprendre a structurer vos pages avec des colonnes, des lignes et des conteneurs. C'est la base absolue de toute mise en page responsive. Sans la grille, pas de layout professionnel.
Detail de la fiche
Etape 1Le concept : 12 colonnes
Bootstrap divise chaque ligne en 12 colonnes invisibles. Vous attribuez a chaque element un nombre de colonnes. La somme dans une ligne doit faire 12. C'est comme un gateau coupe en 12 parts : vous pouvez donner 6 parts a un element et 6 a un autre, ou 4+4+4, etc.
container
Conteneur principal (centre le contenu)
Conteneur principal (centre le contenu)
▼
row
Ligne Flexbox (contient les colonnes)
Ligne Flexbox (contient les colonnes)
▼
col
Colonnes (sur 12 au total)
Colonnes (sur 12 au total)
★ 2 colonnes egales (6 + 6 = 12) ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- 2 colonnes egales : 6 + 6 = 12 -->
2 <divclass="row">
3 <divclass="col-6 bg-primary text-white p-3">
4 Colonne 1 (50%)
5 </div>
6 <divclass="col-6 bg-danger text-white p-3">
7 Colonne 2 (50%)
8 </div>
9 </div>Resultat dans le navigateur
6 + 6 = 12 ✔ Chaque colonne prend 50% de la largeur
Cles de lecture
row=Conteneur Flexbox qui contient les colonnes. Obligatoire entre container et col.
col-6=L'element prend 6 colonnes sur 12, soit 50% de la largeur.
bg-primary=Fond bleu (couleur primaire Bootstrap). Varie : bg-success, bg-danger...
text-white=Texte en blanc pour etre lisible sur fond sombre.
p-3=Padding de 1rem (16px) tout autour de l'element.
★ 3 colonnes egales (4 + 4 + 4 = 12) ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- 3 colonnes egales : 4 + 4 + 4 = 12 -->
2 <divclass="row">
3 <divclass="col-4 bg-success text-white p-3">
4 Carte 1
5 </div>
6 <divclass="col-4 bg-warning text-dark p-3">
7 Carte 2
8 </div>
9 <divclass="col-4 bg-info text-white p-3">
10 Carte 3
11 </div>
12 </div>Resultat dans le navigateur
4 + 4 + 4 = 12 ✔ Chaque colonne prend 33% de la largeur
Cles de lecture
col-4=L'element prend 4 colonnes sur 12 = 33.33% de la largeur.
bg-warning=Fond jaune (couleur attention). text-dark pour texte sombre dessus.
bg-info=Fond bleu clair (couleur info). text-white ou text-dark selon lisibilite.
★ Sidebar + Contenu (4 + 8 = 12) ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Layout sidebar : 4 + 8 = 12 -->
2 <divclass="row">
3 <divclass="col-4 bg-dark text-white p-3">
4 Sidebar
5 </div>
6 <divclass="col-8 bg-light p-3">
7 Contenu principal
8 </div>
9 </div>Resultat dans le navigateur
4 + 8 = 12 ✔ Layout classique sidebar/contenu
Cles de lecture
col-8=L'element prend 8 colonnes sur 12 = 66.67% de la largeur.
bg-dark=Fond gris tres fonce, ideal pour une sidebar avec texte blanc.
bg-light=Fond gris tres clair, ideal pour une zone de contenu.
Etape 2Container vs Container-fluid
| Classe | Comportement | Largeur |
|---|---|---|
.container | Largeur fixe qui change aux breakpoints | 540 / 720 / 960 / 1140 / 1320px |
.container-fluid | Pleine largeur a tous les ecrans | Toujours 100% |
.container-{bp} | Pleine largeur jusqu'au breakpoint, puis fixe | 100% puis fixe |
3
Les Breakpoints
Comment rendre une page responsive avec les breakpoints ?Les breakpoints definissent les points de rupture ou la mise en page change. Vous allez maitriser les 6 breakpoints de Bootstrap pour creer des designs qui s'adaptent parfaitement aux telephones, tablettes et ordinateurs.
Detail de la fiche
Etape 1Les 6 breakpoints Bootstrap 5
| Breakpoint | Classe | Largeur min | Appareils |
|---|---|---|---|
| xs | (pas de prefixe) | 0px | Telephones portrait |
| sm | -sm- | 576px | Telephones landscape |
| md | -md- | 768px | Tablettes |
| lg | -lg- | 992px | Portables |
| xl | -xl- | 1200px | Desktops |
| xxl | -xxl- | 1400px | Grands ecrans |
★ Responsive : 1 col mobile, 2 tablette, 3 desktop ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- 1 colonne tel, 2 tablette, 3 desktop -->
2 <divclass="container">
3 <divclass="row g-4">
4 <divclass="col-12 col-md-6 col-lg-4">
5 <divclass="bg-primary text-white p-3 rounded">
6 Carte 1
7 </div>
8 </div>
9 <divclass="col-12 col-md-6 col-lg-4">
10 <divclass="bg-success text-white p-3 rounded">
11 Carte 2
12 </div>
13 </div>
14 </div>
15 </div>Resultat dans le navigateur
📱 Mobile (col-12)
Carte 1 (100%)
Carte 2 (100%)
📲 Tablette (col-md-6)
Carte 1 (50%)
Carte 2 (50%)
🖥 Desktop (col-lg-4)
Carte 1 (33%)
Carte 2 (33%)
Carte 3 (33%)
Cles de lecture
col-12=Pleine largeur sur tous les ecrans par defaut (mobile-first).
col-md-6=A partir de 768px (tablette), prend 50% = 2 colonnes.
col-lg-4=A partir de 992px (desktop), prend 33% = 3 colonnes.
g-4=Gap (espacement) de 1.5rem entre les colonnes. Remplace les marges manuelles.
rounded=Coins arrondis de 4px sur l'element.
4
Les Classes Utilitaires
Comment maitriser toutes les classes utilitaires ?Les classes utilitaires sont des outils puissants pour styliser rapidement vos elements sans ecrire de CSS personnalise. Cette fiche couvre le systeme complet : marges, padding, flexbox, display, ombres, bordures et plus encore.
Detail de la fiche
Etape 1Logique de construction
Toutes les classes utilitaires suivent un schema systematique :
{prop}{cote}-{taille}
Structure generale
Structure generale
▼
{prop}{cote}-{bp}-{taille}
Avec breakpoint responsive
Avec breakpoint responsive
| Partie | Valeurs | Exemple |
|---|---|---|
| Propriete | m, p, w, h, d, g | m-, p- |
| Cote | t (top), b (bottom), s (start), e (end), x (hori), y (verti) | mt-, px- |
| Taille | 0-5, auto | p-3 = 1rem |
★ Echelle de padding (p-0, p-3, p-5) ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Echelle spacing : 0=0rem, 1=0.25rem ... 5=3rem -->
2 <divclass="p-0 bg-light border mb-2">
3 p-0 (0rem - pas de padding)
4 </div>
5 <divclass="p-3 bg-light border mb-2">
6 p-3 (1rem de padding)
7 </div>
8 <divclass="p-5 bg-light border mb-2">
9 p-5 (3rem de padding)
10 </div>Resultat dans le navigateur
p-0 (0rem - aucun padding)
p-3 (1rem = 16px de padding)
p-5 (3rem = 48px de padding)
L'echelle va de 0 (rien) a 5 (3rem = 48px)
Cles de lecture
p-0=Padding de 0 (aucun espacement interieur).
p-3=Padding de 1rem (16px) tout autour.
p-5=Padding de 3rem (48px) - le plus grand espacement.
mb-2=Margin-bottom de 0.5rem (8px) en dessous de l'element.
bg-light=Fond gris tres clair (#f8f9fa) pour distinguer les zones.
border=Ajoute une bordure grise de 1px tout autour.
★ Centrer avec mx-auto + Flexbox ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Centrer horizontalement avec mx-auto -->
2 <divclass="w-50 mx-auto bg-primary text-white p-4 rounded shadow">
3 Centre avec mx-auto
4 </div>
5
6 <!-- Centrer verticalement et horizontalement -->
7 <divclass="d-flex align-items-center justify-content-center" style="height:200px">
8 <divclass="p-4 bg-success text-white rounded">
9 Contenu centre
10 </div>
11 </div>Resultat dans le navigateur
Cles de lecture
w-50=Largeur de 50%. Autres : w-25, w-75, w-100.
mx-auto=Margin left et right a "auto" pour centrer horizontalement un bloc.
d-flex=Display: flexbox. Transforme le conteneur en flex container.
align-items-center=Centre les enfants verticalement dans le flex container.
justify-content-center=Centre les enfants horizontalement dans le flex container.
shadow=Ombre portee standard (box-shadow). Variants : shadow-sm, shadow-lg.
5
Les Couleurs et le Texte
Comment gerer les couleurs et la typographie ?Bootstrap offre un systeme de couleurs et de typographie complet et coherent. Vous allez apprendre a utiliser les classes de couleur de texte et de fond, les tailles de police, les poids et les transformations pour creer des hierarchies visuelles professionnelles.
Detail de la fiche
★ Couleurs de texte et de fond ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Couleurs de texte -->
2 <pclass="text-primary">>Texte primaire (bleu)</p>
3 <pclass="text-success">>Texte succes (vert)</p>
4 <pclass="text-danger">>Texte danger (rouge)</p>
5 <pclass="text-warning">>Texte attention (jaune)</p>
6
7 <!-- Couleurs de fond -->
8 <divclass="bg-primary text-white p-2 rounded mb-1">>Fond primaire</div>
9 <divclass="bg-success text-white p-2 rounded mb-1">>Fond succes</div>
10 <divclass="bg-danger text-white p-2 rounded mb-1">>Fond danger</div>
11 <divclass="bg-dark text-white p-2 rounded">>Fond sombre</div>Resultat dans le navigateur
● text-primary - Texte primaire (bleu)
● text-success - Texte succes (vert)
● text-danger - Texte danger (rouge)
● text-warning - Texte attention (jaune)
bg-primary text-white
bg-success text-white
bg-danger text-white
bg-dark text-white
Cles de lecture
text-primary=Couleur de texte bleue (#0d6efd). Parfait pour les liens et titres importants.
text-success=Couleur de texte verte (#198754). Pour les messages de succes.
text-danger=Couleur de texte rouge (#dc3545). Pour les erreurs et avertissements.
bg-primary=Fond bleu (#0d6efd). Combine avec text-white pour lisibilite.
bg-dark=Fond gris tres fonce (#212529). Idéal pour les sections d'en-tete.
★ Typographie : tailles, poids, transformations ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Tailles de police fs-1 a fs-6 -->
2 <h1class="fs-1">>Titre fs-1 (2.5rem)</h1>
3 <h2class="fs-2">>Titre fs-2 (2rem)</h2>
4 <pclass="fs-5">>Texte fs-5 (1.25rem)</p>
5
6 <!-- Poids et transformations -->
7 <pclass="fw-bold">>Texte gras</p>
8 <pclass="fw-light">>Texte leger</p>
9 <pclass="text-uppercase">>tout en majuscules</p>
10 <pclass="fst-italic">>En italique</p>Resultat dans le navigateur
Titre fs-1 (2.5rem)
Titre fs-2 (2rem)
Texte fs-5 (1.25rem)
fw-bold - Texte gras
fw-light - Texte leger
TEXT-UPPERCASE - MAJUSCULES
fst-italic - En italique
Cles de lecture
fs-1 a fs-6=Tailles de police. fs-1=2.5rem (le plus grand) a fs-6=1rem (le plus petit).
fw-bold=Font-weight: 700 (gras). Autres : fw-light (300), fw-normal (400), fw-bolder (900).
text-uppercase=Transforme le texte en MAJUSCULES via CSS text-transform.
fst-italic=Font-style: italic. Met le texte en italique.
6
Les Boutons
Comment creer et personnaliser des boutons ?Les boutons sont les elements interactifs les plus courants. Vous allez maitriser les variantes de couleurs, les tailles (sm, lg), les boutons outline (transparent avec bordure), les groupes et les etats desactives.
Detail de la fiche
★ Variantes de couleur et tailles ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Variantes de couleur -->
2 <buttonclass="btn btn-primary">>Primaire</button>
3 <buttonclass="btn btn-success">>Succes</button>
4 <buttonclass="btn btn-danger">>Danger</button>
5 <buttonclass="btn btn-warning">>Attention</button>
6
7 <!-- Tailles -->
8 <buttonclass="btn btn-primary btn-lg">>Grand</button>
9 <buttonclass="btn btn-primary">>Normal</button>
10 <buttonclass="btn btn-primary btn-sm">>Petit</button>
11
12 <!-- Outline et desactive -->
13 <buttonclass="btn btn-outline-primary">>Outline</button>
14 <buttonclass="btn btn-primary" disabled>>Desactive</button>Resultat dans le navigateur
Variantes de couleur :
Primaire
Succes
Danger
Attention
Tailles :
Grand
Normal
Petit
Outline + Desactive :
Outline
Desactive
Cles de lecture
btn=Classe de base obligatoire pour tous les boutons. Applique le style bouton Bootstrap.
btn-primary=Bouton bleu (principale). Variants : btn-success, btn-danger, btn-warning, btn-dark, btn-light, btn-secondary, btn-info.
btn-lg=Bouton grand (padding plus grand). Variants : btn-sm (petit), ou normal par defaut.
btn-outline-primary=Bouton transparent avec bordure bleue. Le fond devient bleu au survol.
disabled=Attribut HTML qui desactive le bouton (grise + impossible de cliquer).
★ Groupe de boutons ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Groupe horizontal -->
2 <divclass="btn-group" role="group">
3 <buttonclass="btn btn-primary">>Gauche</button>
4 <buttonclass="btn btn-primary">>Centre</button>
5 <buttonclass="btn btn-primary">>Droite</button>
6 </div>Resultat dans le navigateur
Les boutons fusionnes partagent leurs bords
Cles de lecture
btn-group=Regroupe les boutons en les collant les uns aux autres (bordures fusionnees).
role="group"=Attribut d'accessibilite ARIA pour indiquer que les boutons forment un groupe.
7
Les Formulaires
Comment construire des formulaires complets et valides ?Les formulaires sont essentiels pour collecter des donnees utilisateur (inscription, contact, commande). Vous allez creer des formulaires complets avec validation visuelle, mise en page responsive et tous les types d'entrees possibles.
Detail de la fiche
★ Formulaire complet avec validation ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <formclass="row g-3">
2 <divclass="col-md-6 mb-3">
3 <labelclass="form-label">>Prenom</label>
4 <input type="text" class="form-control" required/>
5 </div>
6 <divclass="col-md-6 mb-3">
7 <labelclass="form-label">>Email</label>
8 <input type="email" class="form-control" required/>
9 </div>
10 <divclass="col-12 mb-3">
11 <labelclass="form-label">>Message</label>
12 <textareaclass="form-control" rows="3">></textarea>
13 </div>
14 <divclass="col-12">
15 <buttonclass="btn btn-primary" type="submit">>Envoyer</button>
16 </div>
17 </form>Resultat dans le navigateur
Cles de lecture
form-control=Classe obligatoire pour les champs de saisie. Applique le style Bootstrap (bordures, padding, focus).
form-label=Style l'etiquette (label) associee au champ. Marge et poids optimaux.
mb-3=Margin-bottom de 1rem pour espacer les groupes de champs.
g-3=Gap de 1rem entre les colonnes de la grille (remplace les marges manuelles).
required=Attribut HTML5 pour rendre le champ obligatoire (validation native).
type="submit"=Type de bouton qui soumet le formulaire au serveur.
★ Validation : valide et invalide ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Champ valide -->
2 <divclass="mb-3">
3 <labelclass="form-label">>Email</label>
4 <inputtype="email" class="form-control is-valid">
5 <divclass="valid-feedback">>Email correct !</div>
6 </div>
7
8 <!-- Champ invalide -->
9 <divclass="mb-3">
10 <labelclass="form-label">>Email</label>
11 <inputtype="email" class="form-control is-invalid">
12 <divclass="invalid-feedback">>Email requis !</div>
13 </div>Resultat dans le navigateur
Cles de lecture
is-valid=Bordure verte + ombre verte sur le champ. Indique que la valeur est correcte.
is-invalid=Bordure rouge + ombre rouge sur le champ. Indique une erreur de saisie.
valid-feedback=Texte vert affiche sous le champ valide. Visible uniquement avec is-valid.
invalid-feedback=Texte rouge affiche sous le champ invalide. Visible uniquement avec is-invalid.
8
Les Tableaux
Comment presenter des donnees dans des tableaux ?Les tableaux Bootstrap permettent de presenter des donnees structurees avec style : lignes zebrees, survol lumineux, bordures et couleurs de contexte. Vous allez aussi apprendre a les rendre responsives sur mobile.
Detail de la fiche
★ Tableau striped + hover + bordered ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <tableclass="table table-striped table-hover table-bordered">
2 <theadclass="table-primary">
3 <tr>
4 <th>>Nom</th>
5 <th>>Email</th>
6 <th>>Role</th>
7 </tr>
8 </thead>
9 <tbody>
10 <tr>
11 <td>>Baba Niang</td>
12 <td>>baba@example.com</td>
13 <td>>Admin</td>
14 </tr>
15 </tbody>
16 </table>Resultat dans le navigateur
| Nom | Role | |
|---|---|---|
| Baba Niang | baba@example.com | Admin |
| Aissatou Diallo | aissatou@example.com | Utilisateur |
Cles de lecture
table=Classe de base obligatoire pour activer le style Bootstrap du tableau.
table-striped=Lignes zebrees (une sur deux en gris clair) pour faciliter la lecture.
table-hover=Survol lumineux au passage de la souris sur les lignes.
table-bordered=Bordures sur toutes les cellules du tableau.
table-primary=Entete en bleu clair. Variants : table-success, table-danger, table-warning.
9
Les Images
Comment gerer les images de maniere responsive ?Les images doivent etre gerees correctement pour un site responsive et accessible. Vous allez apprendre a rendre vos images fluides (qui s'adaptent a la largeur), a leur appliquer des formes (coins arrondis, cercle, pilule) et a garantir l'accessibilite.
Detail de la fiche
★ Images responsive et formes ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Image responsive (s'adapte a la largeur) -->
2 <img src="photo.jpg" class="img-fluid" alt="Description"/>
3
4 <!-- Image vignette -->
5 <img src="photo.jpg" class="img-thumbnail" alt="Vignette"/>
6
7 <!-- Image circulaire (avatar) -->
8 <img src="avatar.jpg" class="rounded-circle"/>
9 alt="Avatar" width="150" height="150"
10
11 <!-- Image pilule -->
12 <img src="photo.jpg" class="rounded-pill w-50" alt="Photo"/>Resultat dans le navigateur
Cles de lecture
img-fluid=max-width: 100% + height: auto. L'image ne depasse jamais son conteneur.
img-thumbnail=Bordure arrondie de 1px + padding + fond gris. Style vignette photo.
rounded-circle=border-radius: 50%. Transforme l'image en cercle parfait (avatar).
rounded-pill=border-radius: 50rem. Forme de pilule tres elongee.
alt="..."=Texte alternatif pour l'accessibilite (lecteurs d'ecran) et le SEO. Toujours le remplir !
10
Les Cartes (Cards)
Comment creer des cartes de contenu ?Les cartes sont des composants polyvalents pour afficher du contenu (article, produit, profil). Vous allez creer des cartes avec image, titre, description, bouton et pied de page, puis les organiser en grilles responsives.
Detail de la fiche
★ Grille de cartes responsives ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <divclass="row row-cols-1 row-cols-md-3 g-4">
2 <divclass="col">
3 <divclass="card h-100">
4 <img src="..." class="card-img-top" alt="..."/>
5 <divclass="card-body">
6 <h5class="card-title">>Titre</h5>
7 <pclass="card-text">>Description...</p>
8 <ahref="#" class="btn btn-primary">>En savoir plus</a>
9 </div>
10 <divclass="card-footer text-muted">>Il y a 2 jours</div>
11 </div>
12 </div>
13 </div>Resultat dans le navigateur
Cles de lecture
card=Conteneur principal de la carte. Bordure, arrondis et ombre legere.
card-img-top=Image placee en haut de la carte. Se redimensionne automatiquement (100% largeur).
card-body=Corps de la carte contenant le titre, texte et boutons.
card-title=Style du titre de la carte (marge et poids optimises).
card-text=Style du texte descriptif (couleur et interligne optimises).
card-footer=Pied de carte avec fond gris et bordure superieure.
h-100=Hauteur 100%. Toutes les cartes d'une meme ligne auront la meme hauteur.
row-cols-md-3=Sur tablette+ : 3 cartes par ligne. row-cols-1 = 1 carte par ligne sur mobile.
11
La Barre de Navigation
Comment construire une navbar professionnelle ?La barre de navigation (navbar) est l'element central de tout site web. Vous allez construire une navbar complete avec marque, liens, dropdown, formulaire de recherche et menu hamburger responsive qui s'adapte aux mobiles.
Detail de la fiche
★ Navbar avec marque, liens et dropdown ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <navclass="navbar navbar-expand-lg navbar-dark bg-dark">
2 <divclass="container">
3 <aclass="navbar-brand" href="#">>MonSite</a>
4 <button class="navbar-toggler" data-bs-toggle="collapse"/>
5 data-bs-target="#navMenu"
6 <divclass="collapse navbar-collapse" id="navMenu">
7 <ulclass="navbar-nav me-auto">
8 <liclass="nav-item">
9 <aclass="nav-link active" href="#">>Accueil</a>
10 </li>
11 <liclass="nav-item dropdown">
12 <aclass="nav-link dropdown-toggle" href="#">>Services</a>
13 </li>
14 </ul>
15 </div>
16 </div>
17 </nav>Resultat dans le navigateur
Cles de lecture
navbar=Classe de base de la barre de navigation. Conteneur flexbox avec padding et positionnement.
navbar-expand-lg=Navbar horizontale a partir de 992px (lg). En dessous, elle devient hamburger.
navbar-dark=Texte clair sur fond sombre. Utilisez navbar-light pour fond clair.
bg-dark=Fond gris tres fonce (#212529). Autres : bg-primary, bg-light, bg-white.
navbar-brand=Logo ou nom du site. Font-size et poids optimises, marge automatique.
navbar-toggler=Bouton hamburger visible uniquement sur mobile (cache par navbar-expand).
data-bs-toggle="collapse"=Attribut Bootstrap JS qui active/deactive le menu au clic sur mobile.
data-bs-target="#id"=Cible l'element a afficher/masquer (doit correspondre a un id).
navbar-collapse=Conteneur des liens qui se replie sur mobile.
nav-link=Style des liens de navigation (padding, couleur, hover, active).
nav-link active=Lien actif (page courante) avec fond souligne.
me-auto=Margin-end: auto. Pousse les elements suivants vers la droite.
12
Les Alertes
Comment afficher des messages d'alerte ?Les alertes sont des messages de feedback visuels pour informer l'utilisateur (succes, erreur, avertissement, info). Elles peuvent etre fermables et contenir du contenu riche comme des liens ou des titres.
Detail de la fiche
★ Toutes les variantes d'alertes ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <divclass="alert alert-primary" role="alert">
2 Information importante a lire !
3 </div>
4 <divclass="alert alert-success" role="alert">
5 Operation reussie avec succes !
6 </div>
7 <divclass="alert alert-danger" role="alert">
8 Une erreur est survenue !
9 </div>
10 <divclass="alert alert-warning" role="alert">
11 Attention, verifiez vos donnees !
12 </div>Resultat dans le navigateur
ℹ Information importante a lire !
✓ Operation reussie avec succes !
✗ Une erreur est survenue !
⚠ Attention, verifiez vos donnees !
Cles de lecture
alert=Classe de base obligatoire. Applique le style alerte (padding, bordure, coins arrondis).
alert-primary=Alerte bleue pour les informations. Variants : alert-success, alert-danger, alert-warning, alert-info, alert-secondary, alert-light, alert-dark.
role="alert"=Attribut ARIA pour l'accessibilite. Les lecteurs d'ecran annoncent le message.
alert-dismissible=Rend l'alerte fermable avec un bouton X en haut a droite.
13
Les Modales
Comment creer des fenetres modales ?Les modales sont des fenetres superposees qui captent l'attention de l'utilisateur. Ideales pour les confirmations, formulaires de connexion, mentions legales ou galeries d'images. Elles utilisent le systeme JS de Bootstrap.
Detail de la fiche
★ Structure d'une modale ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Bouton declencheur -->
2 <buttonclass="btn btn-primary" data-bs-toggle="modal">
3 data-bs-target="#maModale">Ouvrir</button>
4
5 <!-- Modale -->
6 <divclass="modal fade" id="maModale" tabindex="-1">
7 <divclass="modal-dialog">
8 <divclass="modal-content">
9 <divclass="modal-header">
10 <h5class="modal-title">>Titre</h5>
11 <button class="btn-close" data-bs-dismiss="modal"/>
12 </div>
13 <divclass="modal-body">>Contenu...</div>
14 <divclass="modal-footer">
15 <buttonclass="btn btn-secondary" data-bs-dismiss="modal">>Fermer</button>
16 <buttonclass="btn btn-primary">>Sauvegarder</button>
17 </div>
18 </div>
19 </div>
20 </div>Resultat dans le navigateur
Le fond sombre (overlay) bloque l'interaction avec la page
Cles de lecture
data-bs-toggle="modal"=Declenche l'ouverture de la modale au clic sur le bouton.
data-bs-target="#id"=Cible la modale a ouvrir par son id (doit etre unique).
modal=Conteneur principal de la modale. Cache par defaut, affiche par JS.
fade=Animation de fondu a l'ouverture et a la fermeture.
modal-dialog=Centre la modale et gere les marges et la largeur.
modal-content=Conteneur du contenu (header + body + footer). Fond blanc, arrondis.
modal-header=En-tete avec titre et bouton fermer. Fond gris clair.
modal-body=Corps principal de la modale. Contient le texte, formulaires, etc.
modal-footer=Pied de page avec boutons d'action. Fond gris clair.
data-bs-dismiss="modal"=Ferme la modale au clic (bouton X ou bouton Fermer).
14
La Navigation
Comment utiliser les tabs, breadcrumb et pagination ?Bootstrap offre plusieurs composants de navigation : les onglets (tabs), le fil d'Ariane (breadcrumb), la pagination et les listes de groupe. Chacun a un usage specifique pour guider l'utilisateur dans le site.
Detail de la fiche
★ Tabs + Breadcrumb + Pagination ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Tabs (onglets) -->
2 <ulclass="nav nav-tabs">
3 <liclass="nav-item">
4 <aclass="nav-link active" data-bs-toggle="tab">>Accueil</a>
5 </li>
6 <liclass="nav-item">
7 <aclass="nav-link" data-bs-toggle="tab">>Profil</a>
8 </ul>
9
10 <!-- Breadcrumb (fil d'Ariane) -->
11 <navaria-label="breadcrumb">
12 <olclass="breadcrumb">
13 <liclass="breadcrumb-item">
14 <ahref="#">>Accueil</a>
15 </li>
16 <liclass="breadcrumb-item active">>Detail</li>
17 </ol>
18 </nav>
19
20 <!-- Pagination -->
21 <nav>
22 <ulclass="pagination">
23 <liclass="page-item">
24 <aclass="page-link" href="#">>Prec</a>
25 </li>
26 <liclass="page-item active">
27 <aclass="page-link" href="#">>1</a>
28 </li>
29 </ul>
30 </nav>Resultat dans le navigateur
Tabs (onglets) :
Accueil
Profil
Messages
Breadcrumb :
Accueil
/
Produits
/
Detail
Pagination :
Prec
1
2
3
Suiv
Cles de lecture
nav-tabs=Onglets horizontaux avec bordure inferieure. L'onglet actif est souligne.
nav-link=Style des liens dans la navigation (padding, couleur, hover).
nav-link active=Onglet actif : souligné et couleur mise en evidence.
data-bs-toggle="tab"=Active le comportement onglet (JS Bootstrap requis).
breadcrumb=Liste horizontale de liens separant les niveaux de navigation.
breadcrumb-item=Un niveau dans le fil d'Ariane. Le dernier a la classe active.
pagination=Conteneur des numeros de page. Flexbox avec bordures entre les items.
page-item=Un element de pagination (bouton numero ou suivant/precedent).
page-link=Style du lien dans la pagination (padding, couleur, hover).
page-item active=Page courante : fond bleu, texte blanc.
15
Les Composants Avances
Comment utiliser les composants avances ?Les composants avances permettent de creer des interfaces riches et interactives. Vous allez maitriser le carousel (diaporama), l'offcanvas (panneau lateral), les barres de progression et les spinners (indicateurs de chargement).
Detail de la fiche
★ Progress bars et Spinners ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Barre de progression -->
2 <divclass="progress mb-3">
3 <divclass="progress-bar" style="width: 75%">>75%</div>
4 </div>
5
6 <!-- Barre animee avec stripes -->
7 <divclass="progress">
8 <divclass="progress-bar progress-bar-striped progress-bar-animated">
9 style="width: 60%"
10 </div>
11 </div>
12
13 <!-- Spinners -->
14 <divclass="spinner-border text-primary">></div>
15 <divclass="spinner-grow text-success">></div>Resultat dans le navigateur
Progress bar (75%) :
Striped + animated (60%) :
spinner-border
spinner-grow
Cles de lecture
progress=Conteneur de la barre (fond gris, hauteur fixe, arrondis).
progress-bar=La barre remplie elle-meme. La largeur se definit en % via style="width:...".
progress-bar-striped=Ajoute des lignes diagonales sur la barre (effet stripe).
progress-bar-animated=Anime les stripes de gauche a droite (indique un chargement en cours).
spinner-border=Cercle anime avec bordure (indicateur de chargement classique).
spinner-grow=Cercle qui pulse (grandit et retrecit). Alternative au spinner-border.
text-primary=Couleur de l'element (s'applique aussi aux spinners : text-success, text-danger...).
16
Les Icones Bootstrap
Comment integrer et utiliser les icones Bootstrap ?Les icones apportent une dimension visuelle essentielle a toute interface. Vous allez apprendre a integrer Bootstrap Icons via CDN, a utiliser les icones les plus courantes et a les combiner avec des boutons et badges pour des UI professionnelles.
Detail de la fiche
★ Icones avec boutons et badges ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- Bouton avec icone -->
2 <buttonclass="btn btn-primary">
3 <iclass="bi bi-download me-2">></i>Telecharger
4 </button>
5
6 <!-- Tailles d'icone -->
7 <iclass="bi bi-star fs-1 text-warning">></i>
8 <iclass="bi bi-star fs-4 text-danger">></i>
9
10 <!-- Badge notification -->
11 <buttonclass="btn btn-light position-relative">
12 <iclass="bi bi-bell fs-4">></i>
13 <spanclass="position-absolute top-0 start-100>
14 translate-middle badge rounded-pill bg-danger">5
15 </span>
16 </button>Resultat dans le navigateur
Bouton avec icone :
⬇️ Telecharger
Tailles d'icone :
⭐
⭐
fs-1 (gros) vs fs-4 (moyen)
Badge notification :
🔔
5
Cles de lecture
bi bi-download=Icone Bootstrap de telechargement. Format : bi bi-{nom-de-l'icone}.
me-2=Margin-end (droite) de 0.5rem. Espace l'icone du texte qui suit.
fs-1=Taille de police 2.5rem. Rend l'icone tres grande. Echelle : fs-1 a fs-6.
text-warning=Couleur jaune (attention). Appliquee a l'icone pour la colorer.
position-relative=Position: relative sur le parent pour positionner le badge en absolu.
position-absolute=Position: absolute sur le badge pour le placer par rapport au parent.
top-0 start-100=Place le badge en haut a droite du parent (0% haut, 100% gauche).
translate-middle=Decale le badge de -50% de sa propre taille pour le centrer parfaitement.
badge rounded-pill=Badge en forme de pilule (border-radius: 50rem). Affiche un compteur.
17
Les Bonnes Pratiques
Quelles sont les bonnes pratiques pour un projet Bootstrap propre ?Cette fiche synthetise toutes les bonnes pratiques pour ecrire du code Bootstrap propre, accessible et performant. Vous apprendrez les patterns recommandes par la documentation officielle et les erreurs courantes a eviter.
Detail de la fiche
★ Bon vs Eviter (comparaison) ★
A gauche : le code HTML | A droite : le resultat dans le navigateur
HTML
1 <!-- BON : Mobile-first, g-4 pour espacement -->
2 <divclass="col-12 col-md-6 col-lg-4">
3 <divclass="row g-4">
4 <divclass="col-6">>...</div>
5 </div>
6 </div>
7
8 <!-- EVITER : Ordre inverse, marges manuelles -->
9 <divclass="col-lg-4 col-md-6 col-12">
10 <divclass="row">
11 <divclass="col-6 px-2 my-2">>...</div>
12 </div>
13 </div>Resultat dans le navigateur
✓ BON
col-12 col-md-6 col-lg-4
row g-4
Mobile-first + gap utilitaire
✗ EVITER
col-lg-4 col-md-6 col-12
row + px-2 my-2
Ordre inverse + marges manuelles
Cles de lecture
col-12 col-md-6 col-lg-4=Ordre mobile-first : xs en premier, puis md, puis lg. Toujours du plus petit au plus grand.
g-4=Gap utilitaire (1.5rem). Remplace les marges px-2, my-2 manuelles qui sont moins cohérentes.
px-2 my-2=Marges manuelles a eviter. Utilisez g-{0-5} sur la row a la place.
Etape 2Accessibilite et performance
| Regle | Bonnes pratiques |
|---|---|
| Labels | Toujours associer <label> a chaque <input> |
| ARIA | Utiliser aria-label, aria-hidden, role |
| Contraste | Verifer le ratio de contraste texte/fond (min 4.5:1) |
| alt | Attribut alt descriptif sur toutes les images |
| Minification | Utiliser les versions .min.css et .min.js en production |
| Tree-shaking | Importer uniquement le CSS necessaire via SASS |