Aide-mémoire Bootstrap
Une référence Bootstrap 5.3 imprimable et consultable — grille, espacements, typographie, couleurs, utilitaires flex, boutons, formulaires et composants. Gratuit.
Grille et mise en page
12<div class="container">
Conteneur responsive à largeur fixe
<div class="container-fluid">
Conteneur pleine largeur à chaque breakpoint
<div class="container-md">
Largeur 100% jusqu'au breakpoint md
<div class="row">
Rangée de grille, contient les colonnes
<div class="col">
Colonne auto à largeur égale
<div class="col-6">
S'étend sur 6 des 12 colonnes
<div class="col-md-4">
4 colonnes à partir du breakpoint md
<div class="col-auto">
Colonne dimensionnée à son contenu
<div class="offset-md-2">
Décaler la colonne de 2 colonnes vers la droite
<div class="row g-3">
Espacement de gouttière entre les colonnes
<div class="row row-cols-3">
Forcer 3 colonnes égales par rangée
<div class="order-2">
Réordonner une colonne flex/grid
Utilitaires d'espacement
12m-3
Marge sur tous les côtés (échelle 0-5)
mt-2
Marge en haut
mx-auto
Marges horizontales auto pour centrer
p-4
Remplissage sur tous les côtés
py-2
Remplissage vertical (haut et bas)
ms-3
Marge de début (gauche en LTR, gère le RTL)
me-3
Marge de fin (droite en LTR, gère le RTL)
ps-2
Remplissage de début, gère le RTL
pe-2
Remplissage de fin, gère le RTL
gap-3
Écart entre les éléments flex/grid
m-n1
Marge négative
p-md-5
Remplissage responsive à partir de md
Typographie
14<h1>..<h6>
Niveaux de titre avec style par défaut
<p class="display-1">
Grand titre display (display-1..6)
<p class="lead">
Paragraphe d'introduction mis en avant
fw-bold
Graisse de police gras
fw-semibold
Graisse de police semi-gras
fst-italic
Style de police italique
text-center
Aligner le texte au centre
text-start
Aligner le texte au début, gère le RTL
text-end
Aligner le texte à la fin, gère le RTL
text-truncate
Tronquer le dépassement avec des points de suspension
text-uppercase
Transformer le texte en majuscules
fs-1
Taille de police responsive (fs-1..6)
lh-base
Hauteur de ligne de base (lh-1, lh-sm, lh-lg)
font-monospace
Famille de police monospace
Couleurs et arrière-plan
10text-primary
Couleur de texte primaire
bg-primary
Couleur d'arrière-plan primaire
bg-primary-subtle
Teinte d'arrière-plan primaire subtile
text-primary-emphasis
Texte primaire accentué, adapté au thème
text-bg-primary
Arrière-plan primaire avec texte à contraste auto
link-primary
Utilitaire de lien coloré
bg-opacity-50
Appliquer une opacité d'arrière-plan de 50%
text-body-secondary
Texte de corps secondaire atténué
text-body-emphasis
Texte de corps fortement accentué
border-primary-subtle
Couleur de bordure primaire subtile
Utilitaires flex
10d-flex
Créer un conteneur flex
flex-row
Disposer les éléments en ligne
flex-column
Disposer les éléments en colonne
justify-content-between
Espacer les éléments sur l'axe principal
align-items-center
Centrer les éléments sur l'axe transversal
flex-wrap
Autoriser le retour à la ligne des éléments
flex-grow-1
Laisser un élément grandir pour remplir l'espace
flex-fill
Forcer des largeurs flexibles égales
align-self-end
Aligner un seul élément à la fin
flex-md-row
Direction flex responsive à partir de md
Affichage et position
12d-none
Masquer l'élément
d-md-block
Afficher en bloc à partir du breakpoint md
position-relative
Positionnement relatif
position-absolute
Positionnement absolu
position-fixed
Positionnement fixe
position-sticky
Positionnement collant (sticky)
top-0 start-0
Épingler en haut à gauche, gère le RTL
translate-middle
Centrer via transform translate
fixed-top
Fixer l'élément en haut de la fenêtre
sticky-top
Coller en haut au défilement
z-3
Définir le z-index (z-0..3)
invisible
Masquer en conservant l'espace de mise en page
Dimensionnement et bordures
12w-100
Largeur 100% du parent
w-50
Largeur 50% du parent
h-100
Hauteur 100% du parent
mw-100
Largeur maximale 100%
vh-100
Hauteur 100% de la fenêtre
border
Ajouter une bordure par défaut sur tous les côtés
border-0
Supprimer toutes les bordures
border-primary
Colorer la bordure
rounded
Rayon de bordure par défaut
rounded-pill
Forme pilule entièrement arrondie
rounded-circle
Rayon de bordure circulaire
shadow-sm
Petite ombre portée (shadow, shadow-lg)
Boutons
9<button class="btn btn-primary">
Bouton primaire plein
<button class="btn btn-outline-primary">
Variante de bouton contour
<button class="btn btn-lg">
Grand bouton (aussi btn-sm)
<button class="btn btn-link">
Bouton stylé comme un lien
<button class="btn-close">
Bouton de fermeture générique (×)
<button class="btn disabled">
État désactivé du bouton
<button class="btn active">
État actif du bouton
<div class="d-grid"><button class="btn">
Bouton bloc pleine largeur via d-grid
<div class="btn-group">
Grouper des boutons ensemble
Formulaires
11<input class="form-control">
Champ texte stylé
<label class="form-label">
Étiquette de champ de formulaire
<select class="form-select">
Liste déroulante select stylée
<div class="form-check">
Conteneur case/radio
<input class="form-check-input">
Case ou radio stylée
<div class="form-check form-switch">
Composant interrupteur à bascule
<input class="form-control-lg">
Grand champ (aussi form-control-sm)
<div class="input-group">
Grouper des champs avec des compléments
is-invalid
État de validation invalide (is-valid)
<div class="form-floating">
Champ à étiquette flottante
col-form-label
Étiquette alignée pour formulaires horizontaux
Composants
14<div class="card">
Carte de contenu flexible
<nav class="navbar navbar-expand-lg">
Barre de navigation responsive
data-bs-toggle="modal" data-bs-target="#m"
Déclencher une boîte de dialogue modale
data-bs-toggle="dropdown"
Basculer un menu déroulant
data-bs-toggle="collapse"
Basculer un élément repliable
<div class="accordion">
Panneaux repliables empilés
<div class="alert alert-dismissible">
Message d'alerte fermable
<span class="badge text-bg-primary">
Petit badge de compteur ou d'étiquette
<ul class="list-group">
Liste d'éléments stylée
<ul class="nav nav-tabs">
Navigation par onglets
<div class="toast">
Notification toast légère
<div class="offcanvas">
Panneau latéral hors-canevas
<div class="spinner-border">
Indicateur de chargement (spinner)
<nav><ul class="pagination">
Liens de navigation paginés
Utilitaires et divers
11data-bs-theme="dark"
Activer le mode sombre sur une portée
<div class="ratio ratio-16x9">
Boîte au ratio responsive
visually-hidden
Masquer visuellement, garder pour les lecteurs d'écran
visually-hidden-focusable
Masqué jusqu'au focus (liens d'évitement)
stretched-link
Rendre un parent entièrement cliquable
clearfix
Effacer les enfants flottants
<div class="vstack gap-2">
Pile verticale d'éléments
<div class="hstack gap-2">
Pile horizontale d'éléments
<a class="icon-link">
Lien aligné avec une icône en ligne
<div class="progress">
Conteneur de barre de progression
<nav class="breadcrumb">
Fil d'Ariane de navigation
Aucune entrée ne correspond à « :q ».
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.