Bootstrap 5 v5.3
Framework CSS le plus populaire — grille responsive, composants prêts à l'emploi et utilitaires puissants.
Installation & Setup
CDN — intégration rapide
Ajoutez le CSS dans le <head> et le JS Bundle (inclut Popper.js) avant la fermeture du </body>.
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mon projet Bootstrap</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous" />
</head>
<body>
<!-- Votre contenu ici -->
<!-- Bootstrap JS Bundle (inclut Popper.js) -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmA0gpS+zRUtBCPGwmPLyGBCQbCL"
crossorigin="anonymous"></script>
</body>
</html>Installation via npm
Bash
npm install bootstrap@5.3.3
# Importer dans votre fichier JS / entry point
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
# Ou importer uniquement les modules JS nécessaires
import { Modal, Tooltip, Toast } from 'bootstrap';Containers & Grid
Types de containers
Les containers centrent et limitent la largeur du contenu. container a des max-width par breakpoint, container-fluid fait toujours 100%.
HTML
<!-- Container responsive (max-width par breakpoint) -->
<div class="container">...</div>
<!-- Container pleine largeur -->
<div class="container-fluid">...</div>
<!-- Container limité à partir d'un breakpoint -->
<div class="container-sm">...</div> <!-- 100% sous sm -->
<div class="container-md">...</div> <!-- 100% sous md -->
<div class="container-lg">...</div> <!-- 100% sous lg -->
<div class="container-xl">...</div> <!-- 100% sous xl -->
<div class="container-xxl">...</div> <!-- 100% sous xxl -->Breakpoints Bootstrap 5
| Préfixe | Breakpoint | Max-width container | Appareils |
|---|---|---|---|
xs (aucun) | < 576px | 100% | Téléphones portrait |
sm | ≥ 576px | 540px | Téléphones paysage |
md | ≥ 768px | 720px | Tablettes |
lg | ≥ 992px | 960px | Petits desktops |
xl | ≥ 1200px | 1140px | Desktops |
xxl | ≥ 1400px | 1320px | Grands écrans |
Système de grille —
row et colLa grille Bootstrap divise chaque ligne en 12 colonnes. Les classes col-* définissent combien de colonnes occupe un élément.
HTML
<div class="container">
<!-- Colonnes automatiques (largeur égale) -->
<div class="row">
<div class="col">Auto</div>
<div class="col">Auto</div>
<div class="col">Auto</div>
</div>
<!-- Colonnes fixes (sur 12) -->
<div class="row">
<div class="col-6">6/12 = 50%</div>
<div class="col-3">3/12 = 25%</div>
<div class="col-3">3/12 = 25%</div>
</div>
<!-- Responsive : 12 cols sur mobile, 6 sur md, 4 sur lg -->
<div class="row">
<div class="col-12 col-md-6 col-lg-4">Carte 1</div>
<div class="col-12 col-md-6 col-lg-4">Carte 2</div>
<div class="col-12 col-md-6 col-lg-4">Carte 3</div>
</div>
<!-- Offset, Order, Gutters -->
<div class="row g-3"> <!-- g-3 = gap 16px -->
<div class="col-md-4 offset-md-2">Décalé de 2 colonnes</div>
<div class="col-md-4 order-md-1">Réordonné</div>
</div>
<!-- Layout complet : header / sidebar / content -->
<header class="row">
<div class="col-12"><nav>Header</nav></div>
</header>
<div class="row g-0">
<aside class="col-12 col-md-3">Sidebar</aside>
<main class="col-12 col-md-9">Contenu principal</main>
</div>
</div>Flexbox Utilities
Classes Flexbox Bootstrap
Bootstrap expose les propriétés CSS Flexbox via des classes utilitaires. Toutes sont déclinables par breakpoint : d-md-flex, justify-content-lg-between…
HTML
<!-- Activer flex -->
<div class="d-flex">...</div>
<div class="d-inline-flex">...</div>
<!-- Direction -->
<div class="d-flex flex-row">...</div> <!-- → défaut -->
<div class="d-flex flex-column">...</div> <!-- ↓ -->
<div class="d-flex flex-row-reverse">...</div>
<!-- Justify-content (axe principal) -->
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
<!-- Align-items (axe secondaire) -->
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-stretch">...</div>
<div class="d-flex align-items-baseline">...</div>
<!-- Wrap -->
<div class="d-flex flex-wrap">...</div>
<div class="d-flex flex-nowrap">...</div>
<!-- Gap -->
<div class="d-flex gap-3">...</div> <!-- gap: 1rem -->
<div class="d-flex gap-2">...</div> <!-- gap: 0.5rem -->
<!-- Flex items -->
<div class="d-flex">
<div class="flex-grow-1">Prend tout l'espace disponible</div>
<div class="ms-auto">Poussé à droite (margin-left: auto)</div>
</div>
<!-- Exemple barre de navigation -->
<div class="d-flex align-items-center justify-content-between p-3">
<span class="fw-bold">Logo</span>
<nav class="d-flex gap-3">
<a href="#">Accueil</a>
<a href="#">À propos</a>
</nav>
<button class="btn btn-primary ms-auto">Connexion</button>
</div>Spacing (m, p)
Marges et Paddings — convention
{prop}{côté}-{taille}Bootstrap utilise une échelle de 0 à 5 (et auto) basée sur $spacer = 1rem. La syntaxe est m (margin) ou p (padding) + côté + tiret + valeur.
| Côté | Signification |
|---|---|
t | top |
b | bottom |
s | start (left en LTR) |
e | end (right en LTR) |
x | left + right |
y | top + bottom |
| (rien) | tous les côtés |
HTML
<!-- Marges -->
<div class="m-0">margin: 0</div>
<div class="m-1">margin: 0.25rem</div>
<div class="m-2">margin: 0.5rem</div>
<div class="m-3">margin: 1rem</div>
<div class="m-4">margin: 1.5rem</div>
<div class="m-5">margin: 3rem</div>
<div class="mx-auto">centrage horizontal</div>
<div class="mt-3 mb-2">top + bottom différents</div>
<!-- Paddings -->
<div class="p-3">padding: 1rem (tous les côtés)</div>
<div class="px-4 py-2">padding horizontal 1.5rem, vertical 0.5rem</div>
<div class="pt-0 pb-3">padding-top: 0, padding-bottom: 1rem</div>
<!-- Tailles (width / height) -->
<div class="w-25">width: 25%</div>
<div class="w-50">width: 50%</div>
<div class="w-75">width: 75%</div>
<div class="w-100">width: 100%</div>
<div class="h-100">height: 100%</div>
<!-- Gap dans row/flex -->
<div class="row g-3">...</div> <!-- gutter 1rem -->
<div class="row gx-4 gy-2">...</div> <!-- gutter-x / gutter-y séparés -->Typographie
Classes de typographie Bootstrap
HTML
<!-- Titres display (très grands) -->
<h1 class="display-1">Display 1 (5rem)</h1>
<h2 class="display-2">Display 2 (4.5rem)</h2>
<h3 class="display-3">Display 3 (4rem)</h3>
<h4 class="display-4">Display 4 (3.5rem)</h4>
<h5 class="display-5">Display 5 (3rem)</h5>
<h6 class="display-6">Display 6 (2.5rem)</h6>
<!-- Tailles de police -->
<p class="fs-1">fs-1 = 2.5rem</p>
<p class="fs-2">fs-2 = 2rem</p>
<p class="fs-3">fs-3 = 1.75rem</p>
<p class="fs-4">fs-4 = 1.5rem</p>
<p class="fs-5">fs-5 = 1.25rem</p>
<p class="fs-6">fs-6 = 1rem</p>
<!-- Couleurs de texte -->
<p class="text-primary">Bleu primaire</p>
<p class="text-secondary">Gris secondaire</p>
<p class="text-success">Vert succès</p>
<p class="text-danger">Rouge danger</p>
<p class="text-warning">Jaune avertissement</p>
<p class="text-info">Bleu ciel info</p>
<p class="text-muted">Gris atténué</p>
<!-- Graisse & style -->
<p class="fw-bold">Gras (700)</p>
<p class="fw-semibold">Semi-gras (600)</p>
<p class="fw-normal">Normal (400)</p>
<p class="fw-light">Léger (300)</p>
<p class="fst-italic">Italique</p>
<!-- Alignement -->
<p class="text-start">Aligné à gauche</p>
<p class="text-center">Centré</p>
<p class="text-end">Aligné à droite</p>
<!-- Autres -->
<p class="lead">Texte introductif plus grand</p>
<p class="text-truncate" style="max-width:200px;">Texte trop long tronqué avec ellipsis...</p>Boutons
Variantes de boutons
HTML
<!-- Boutons pleins -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<!-- Boutons outline -->
<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-outline-danger">Outline Danger</button>
<!-- Tailles -->
<button class="btn btn-primary btn-sm">Petit</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-lg">Grand</button>
<!-- Pleine largeur -->
<div class="d-grid">
<button class="btn btn-primary">Bouton pleine largeur</button>
</div>
<!-- Désactivé -->
<button class="btn btn-primary" disabled>Désactivé</button>
<a class="btn btn-primary disabled" aria-disabled="true">Lien désactivé</a>
<!-- Groupe de boutons -->
<div class="btn-group" role="group">
<button class="btn btn-outline-primary">Gauche</button>
<button class="btn btn-outline-primary">Centre</button>
<button class="btn btn-outline-primary">Droite</button>
</div>
<!-- Toggle buttons (boutons radio/checkbox stylisés) -->
<div class="btn-group" role="group">
<input type="radio" class="btn-check" name="options" id="opt1" autocomplete="off" checked />
<label class="btn btn-outline-primary" for="opt1">Option 1</label>
<input type="radio" class="btn-check" name="options" id="opt2" autocomplete="off" />
<label class="btn btn-outline-primary" for="opt2">Option 2</label>
</div>Cards
Composant Card Bootstrap
HTML
<!-- Card de base -->
<div class="card" style="width: 18rem;">
<img src="image.jpg" class="card-img-top" alt="Image de la carte" />
<div class="card-header">En-tête de la carte</div>
<div class="card-body">
<h5 class="card-title">Titre de la carte</h5>
<p class="card-text">Description de la carte avec du contenu intéressant.</p>
<a href="#" class="btn btn-primary">Voir plus</a>
</div>
<div class="card-footer text-muted">Mis à jour il y a 3 mins</div>
</div>
<!-- Card avec image en overlay -->
<div class="card text-white">
<img src="bg.jpg" class="card-img" alt="..." />
<div class="card-img-overlay">
<h5 class="card-title">Titre par-dessus l'image</h5>
<p class="card-text">Texte en overlay.</p>
</div>
</div>
<!-- Deck de cartes avec grille (Bootstrap 5) -->
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="img1.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Carte 1</h5>
<p class="card-text">Description de la carte 1.</p>
</div>
<div class="card-footer">
<small class="text-muted">Dernière mise à jour hier</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Carte 2</h5>
<p class="card-text">Description de la carte 2.</p>
</div>
</div>
</div>
</div>Formulaires
Contrôles de formulaire
HTML
<!-- Input classique avec label -->
<div class="mb-3">
<label for="email" class="form-label">Adresse email</label>
<input type="email" class="form-control" id="email" placeholder="nom@exemple.com" />
</div>
<!-- Textarea -->
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="4"></textarea>
</div>
<!-- Select -->
<div class="mb-3">
<label for="pays" class="form-label">Pays</label>
<select class="form-select" id="pays">
<option selected>Choisir...</option>
<option value="fr">France</option>
<option value="be">Belgique</option>
</select>
</div>
<!-- Checkbox et Radio -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cgv" />
<label class="form-check-label" for="cgv">J'accepte les CGV</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genre" id="homme" />
<label class="form-check-label" for="homme">Homme</label>
</div>
<!-- Floating labels -->
<div class="form-floating mb-3">
<input type="text" class="form-control" id="nomFlottant" placeholder="Prénom" />
<label for="nomFlottant">Prénom</label>
</div>
<!-- Input group -->
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Nom d'utilisateur" />
<button class="btn btn-primary">Valider</button>
</div>
<!-- Validation HTML5 + Bootstrap -->
<form class="needs-validation" novalidate>
<div class="mb-3">
<label class="form-label">Nom</label>
<input type="text" class="form-control" required />
<div class="valid-feedback">Parfait !</div>
<div class="invalid-feedback">Ce champ est requis.</div>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
<script>
// Activer la validation Bootstrap
document.querySelectorAll('.needs-validation').forEach(form => {
form.addEventListener('submit', e => {
if (!form.checkValidity()) { e.preventDefault(); e.stopPropagation(); }
form.classList.add('was-validated');
});
});
</script>Alertes & Badges
Alertes
HTML
<!-- Alertes de base -->
<div class="alert alert-primary" role="alert">Alerte primaire — information.</div>
<div class="alert alert-success" role="alert">Succès ! Opération réussie.</div>
<div class="alert alert-danger" role="alert">Erreur ! Quelque chose a mal tourné.</div>
<div class="alert alert-warning" role="alert">Attention ! Vérifiez vos données.</div>
<div class="alert alert-info" role="alert">Info — voici ce que vous devez savoir.</div>
<!-- Alerte dismissible (avec bouton de fermeture) -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Attention !</strong> Votre session expire bientôt.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
</div>Badges
HTML
<!-- Badges de base -->
<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-secondary">Secondary</span>
<!-- Badge pill (arrondi) -->
<span class="badge bg-primary rounded-pill">42</span>
<span class="badge bg-success rounded-pill">Nouveau</span>
<!-- Badge positionné sur un bouton (notifications) -->
<button class="btn btn-primary position-relative">
Messages
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
9+
<span class="visually-hidden">messages non lus</span>
</span>
</button>Tables
Classes pour les tableaux
HTML
<!-- Table de base -->
<table class="table">
<thead>
<tr><th>#</th><th>Nom</th><th>Statut</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Alice</td><td>Actif</td></tr>
<tr><td>2</td><td>Bob</td><td>Inactif</td></tr>
</tbody>
</table>
<!-- Modificateurs de table -->
<table class="table table-striped">...</table> <!-- lignes alternées -->
<table class="table table-hover">...</table> <!-- survol mis en valeur -->
<table class="table table-bordered">...</table> <!-- bordures sur toutes les cellules -->
<table class="table table-borderless">...</table> <!-- sans bordures -->
<table class="table table-sm">...</table> <!-- compact -->
<table class="table table-dark">...</table> <!-- fond sombre -->
<!-- Combinaisons -->
<table class="table table-striped table-hover table-bordered">...</table>
<!-- Colorer des lignes -->
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<!-- Table responsive (scroll horizontal sur mobile) -->
<div class="table-responsive">
<table class="table table-striped">
<thead class="table-dark">
<tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr>
</thead>
<tbody>
<tr><td>Donnée</td><td>Donnée</td><td>Donnée</td></tr>
</tbody>
</table>
</div>Modal
Fenêtre modale complète
Les modales Bootstrap nécessitent le JS Bundle. Ouvrez-les avec data-bs-toggle="modal" ou via JavaScript.
HTML
<!-- Bouton déclencheur -->
<button class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#maModal">
Ouvrir la modale
</button>
<!-- Structure de la modale -->
<div class="modal fade" id="maModal" tabindex="-1"
aria-labelledby="maModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- modal-sm / modal-lg / modal-xl -->
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h5 class="modal-title" id="maModalLabel">Titre de la modale</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<!-- Body -->
<div class="modal-body">
<p>Contenu de la modale. Formulaires, textes, images, etc.</p>
</div>
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary">Confirmer</button>
</div>
</div>
</div>
</div>JavaScript
// Ouvrir une modale via JavaScript
const el = document.getElementById('maModal');
const modal = new bootstrap.Modal(el);
modal.show();
// Fermer
modal.hide();
// Écouter les événements
el.addEventListener('show.bs.modal', () => {
console.log('Modale en cours d\'ouverture');
});
el.addEventListener('hidden.bs.modal', () => {
console.log('Modale fermée');
});Carousel
Carrousel d'images
HTML
<div id="monCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Indicateurs (points) -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#monCarousel" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#monCarousel" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#monCarousel" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<!-- Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1" />
<div class="carousel-caption d-none d-md-block">
<h5>Titre du slide 1</h5>
<p>Description du premier slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2" />
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="Slide 3" />
</div>
</div>
<!-- Flèches de navigation -->
<button class="carousel-control-prev" type="button"
data-bs-target="#monCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Précédent</span>
</button>
<button class="carousel-control-next" type="button"
data-bs-target="#monCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Suivant</span>
</button>
</div>Utilitaires divers
Arrondis, ombres, bordures
HTML
<!-- Arrondis -->
<img class="rounded" src="img.jpg" /> <!-- border-radius: 0.375rem -->
<img class="rounded-circle" src="img.jpg" /> <!-- cercle -->
<span class="rounded-pill">Badge</span> <!-- pilule -->
<div class="rounded-0">Sans arrondi</div>
<div class="rounded-1">Petit arrondi</div>
<div class="rounded-3">Grand arrondi</div>
<!-- Ombres -->
<div class="shadow-sm">Ombre légère</div>
<div class="shadow">Ombre normale</div>
<div class="shadow-lg">Ombre prononcée</div>
<div class="shadow-none">Sans ombre</div>
<!-- Bordures -->
<div class="border">Toutes les bordures</div>
<div class="border border-primary">Bordure colorée</div>
<div class="border-top">Bordure top seulement</div>
<div class="border-0">Sans bordure</div>Visibilité, overflow, position
HTML
<!-- Affichage / Masquage -->
<div class="d-none">Caché (display: none)</div>
<div class="d-block">Visible (display: block)</div>
<div class="d-none d-md-block">Caché mobile, visible desktop</div>
<div class="d-md-none">Visible mobile seulement</div>
<span class="visually-hidden">Pour lecteurs d'écran uniquement</span>
<!-- Position -->
<div class="position-relative">
<span class="position-absolute top-0 start-0">Coin haut-gauche</span>
<span class="position-absolute top-0 end-0">Coin haut-droite</span>
<span class="position-absolute top-50 start-50 translate-middle">Centre</span>
</div>
<!-- Overflow -->
<div class="overflow-hidden">...</div>
<div class="overflow-auto">...</div>
<div class="overflow-scroll">...</div>
<!-- Opacité -->
<div class="opacity-75">75% d'opacité</div>
<div class="opacity-50">50% d'opacité</div>
<div class="opacity-25">25% d'opacité</div>
<!-- Fond avec opacité -->
<div class="bg-primary bg-opacity-50">Fond bleu à 50%</div>
<!-- Text utilities -->
<a class="text-decoration-none" href="#">Lien sans soulignement</a>
<!-- z-index -->
<div class="z-0">z-index: 0</div>
<div class="z-1">z-index: 1</div>
<div class="z-2">z-index: 2</div>
<div class="z-3">z-index: 3</div>Aucun résultat pour votre recherche.