Module 1Les bases de Bootstrap
Chapitre 3 sur 9
Les classes utilitaires
Espacements, couleurs, affichage, Flexbox et autres classes utilitaires.
- ≈ 125 min
- 5 leçons
- 7 vidéos
- 2 exercices
Module 1Les bases de Bootstrap
Chapitre 3 sur 9
Espacements, couleurs, affichage, Flexbox et autres classes utilitaires.
Objectifs
Avec ce chapitre, tu sauras…
m-*, p-*, mt-3, px-md-5 ;d-* ;Les utilitaires sont des classes qui font une seule chose : ajouter une marge, centrer un texte, colorer un fond. Combinés, ils évitent d'écrire la plupart des petites règles CSS. Ce chapitre est celui que tu utiliseras le plus au quotidien.
Leçon 1
Tableau: Les tailles
| Taille | Valeur |
|---|---|
0 | 0 |
1 | 0.25rem (4 px) |
2 | 0.5rem (8 px) |
3 | 1rem (16 px) |
4 | 1.5rem (24 px) |
5 | 3rem (48 px) |
auto | auto (pour centrer : mx-auto) |
| Classe | Signification |
|---|---|
mt-3 | marge en haut de 1rem |
py-5 | padding haut et bas de 3rem |
px-md-4 | padding gauche et droite de 1.5rem à partir de md |
mb-0 | aucune marge en bas |
mx-auto | centre un bloc qui a une largeur |
gap-3 | espace de 1rem entre les enfants d'un conteneur flex ou grid |
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
Leçon 2
| Nom | Usage |
|---|---|
primary | couleur principale (bleu par défaut) |
secondary | gris, actions secondaires |
success | succès, validation (vert) |
danger | erreur, suppression (rouge) |
warning | avertissement (jaune) |
info |
Leçon 3
| Classe | Effet |
|---|---|
d-none | masque l'élément |
d-block, d-inline, d-inline-block | type d'affichage |
d-flex, d-grid | active Flexbox ou Grid |
d-none d-md-block | masqué sur mobile, visible à partir de md |
d-md-none | visible sur mobile, masqué à partir de md |
Leçon 4
| Classe | Propriété CSS |
|---|---|
d-flex | display: flex |
flex-column, flex-md-row | flex-direction |
justify-content-between, -center, -end | justify-content |
align-items-center | align-items |
flex-wrap | flex-wrap: wrap |
Leçon 5
| Famille | Classes courantes |
|---|---|
| bordures | border, border-top, border-0, border-primary, border-2 |
| coins | rounded, rounded-3, rounded-circle, rounded-pill |
| texte | text-center, text-md-start, text-uppercase, fw-bold, fst-italic, fs-4, lh-lg, text-truncate |
| tailles | w-25, w-50, w-100, h-100, mw-100, vh-100 |
| ombres |
1mb-4 signifie…
2Pour masquer un élément sur mobile et l'afficher à partir de lg :
3px-3 agit sur…
4Quelle classe crée une image ronde ?
5Pour pousser un élément à droite dans un conteneur flex :
6text-bg-success…
L'essentiel du chapitre
{m|p}{t|b|s|e|x|y}-{point}-{0..5|auto} ; 3 = 1rem, 5 = 3rem.primary, secondary, success, danger, warning, info, light, dark → text-*, bg-*, text-bg-*.d-none d-md-block ; Flexbox : d-flex, justify-content-*, align-items-*, gap-*, ms-auto.border, rounded-* ; texte text-center, fw-bold, fs-* ; tailles w-*, h-* ; ombres shadow-*.| information (cyan) |
light / dark | fonds clairs / sombres |
| Classe | Effet |
|---|---|
text-primary, text-danger… | couleur du texte |
text-body-secondary | texte gris discret |
bg-light, bg-dark… | couleur de fond |
text-bg-primary | fond et texte contrasté automatiquement |
bg-opacity-50 | fond semi-transparent |
link-primary | couleur d'un lien |
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
d-print-none| masqué à l'impression |
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
flex-grow-1flex-grow: 1 |
gap-2 | gap: 0.5rem |
ms-auto | pousse l'élément à droite |
Vidéo · À regarder
FRTutoriel BOOTSTRAP 5 - 16 - Flexbox
Seb Code · YouTube
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
shadow-sm, shadow, shadow-lg, shadow-none |
| position | position-relative, position-absolute, top-0, end-0, translate-middle |
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
Tableau: Exemples
Les utilitaires d'espacement (anglais) : la syntaxe m/p + côté + taille en démonstration.
Bootstrap définit des couleurs thématiques, utilisables partout :
Tout ce que tu as appris en Flexbox existe en classes :
Crée un bandeau : sur mobile, le texte et le bouton sont empilés et centrés ; à partir de md, le texte est à gauche et le bouton à droite, alignés verticalement.
Sans écrire une ligne de CSS, crée une section « Bienvenue » : fond sombre, texte blanc centré, padding vertical de 3rem, un titre en fs-1 et en gras, un paragraphe gris clair, et deux boutons côte à côte centrés avec un espace entre eux.
Tableau: Les classes de couleur
Une alerte rouge sans texte explicite ne dit rien à une personne daltonienne ou aveugle. La couleur renforce un message (« Erreur : mot de passe incorrect »), elle ne le remplace jamais. Vérifie aussi le contraste : text-warning sur fond blanc est peu lisible.
Les utilitaires de couleur (anglais).
Les utilitaires d'affichage (anglais), avec les classes responsives.
<div class="d-flex justify-content-between align-items-center p-3 border-bottom">
<strong>Atlas Évasion</strong>
<div class="d-flex gap-2">
<a href="#" class="btn btn-outline-primary">Connexion</a>
<a href="#" class="btn btn-primary">Réserver</a>
</div>
</div>Les stacks sont des raccourcis : .vstack (pile verticale) et .hstack (pile horizontale), avec gap-*.
<div class="vstack gap-2 col-md-5 mx-auto">
<button class="btn btn-primary">Continuer</button>
<button class="btn btn-outline-secondary">Annuler</button>
</div>Les utilitaires Flexbox de Bootstrap 5, en français par Seb Code. Regarde la vidéo en entier.
Les utilitaires Flexbox (anglais), dernier chapitre du cours de Web Dev Simplified.
Les stacks (anglais), en un peu plus d'une minute.
Les utilitaires de bordure (anglais).
Utilise les utilitaires pour les ajustements ponctuels (une marge, un alignement). Si tu répètes la même combinaison de dix classes sur vingt éléments, crée plutôt une classe dans ton propre CSS : ton HTML restera lisible.