Bootstrap 5 : maîtriser la grille, les utilitaires et les composants pour créer un site responsive

Thématique: Développement web & mobile
Tous les guides: HTML, CSS, JavaScript et frameworks
Mis à jour: 26 septembre 2026
Lecture: 12 min
Formation: Créer des sites web responsive avec Bootstrap 5

L'essentiel en 30 secondes

Bootstrap 5 est un framework CSS open source qui fournit une grille responsive, des classes utilitaires et des composants prêts à l'emploi.
La grille Bootstrap repose sur trois niveaux imbriqués : un conteneur, des lignes (row) et des colonnes (col) réparties sur 12 unités.
Six points de rupture (xs, sm, md, lg, xl, xxl) permettent d'adapter la mise en page de l'écran de téléphone au grand écran.
Bootstrap 5 ne dépend plus de jQuery : ses composants interactifs fonctionnent en JavaScript natif via des attributs data-bs-*.
Le thème se personnalise avec les variables CSS --bs-* ou, plus en profondeur, avec les variables Sass avant compilation.

Sommaire de l'article

Qu’est-ce que Bootstrap 5 ?
Pourquoi utiliser un framework CSS comme Bootstrap ?
Comment créer un site avec Bootstrap 5 : les étapes
Personnaliser le thème de Bootstrap 5
Composants Bootstrap interactifs : modale, carrousel et accordéon
Bonnes pratiques pour un site responsive performant
Les erreurs fréquentes avec Bootstrap (et comment les éviter)
Bootstrap 5, Tailwind CSS ou CSS natif : comparaison
Comment apprendre Bootstrap 5 et progresser ?
En résumé

Bootstrap 5 est un framework CSS open source qui permet de créer rapidement un site responsive : il fournit une grille de mise en page flexible, des centaines de classes utilitaires et des composants prêts à l’emploi (barre de navigation, cartes, modales, formulaires) qui s’adaptent automatiquement à toutes les tailles d’écran. Vous écrivez du HTML, vous ajoutez les bonnes classes, et la page fonctionne sur mobile comme sur ordinateur.

Ce tutoriel s’adresse aux débutants qui connaissent les bases du HTML, aux graphistes qui veulent intégrer leurs maquettes et aux développeurs qui cherchent à accélérer la création d’interfaces. Vous y apprendrez à installer Bootstrap, à maîtriser la grille, à utiliser les utilitaires et les composants, à personnaliser le thème et à éviter les erreurs courantes.

Qu’est-ce que Bootstrap 5 ?

Bootstrap est un framework CSS, c’est-à-dire une bibliothèque de styles et de scripts prêts à l’emploi pour construire des interfaces web. La version 5 fournit un système de grille responsive, des classes utilitaires pour l’espacement, l’alignement ou la couleur, et des composants interactifs en JavaScript natif, sans dépendance à jQuery.

Sa philosophie est mobile first : les styles de base visent les petits écrans, puis des classes suffixées (-md, -lg…) modifient l’affichage à partir d’une certaine largeur. Vous concevez d’abord pour le téléphone, puis vous enrichissez pour les écrans plus larges.

Bootstrap ne remplace pas la connaissance du HTML et du CSS : il les suppose. Si vous partez de zéro, commencez par notre parcours pour apprendre HTML, puis par les fondamentaux présentés dans apprendre CSS.

Pourquoi utiliser un framework CSS comme Bootstrap ?

Gain de temps : une barre de navigation responsive, une grille de cartes ou une fenêtre modale se construisent en quelques lignes.
Cohérence visuelle : espacements, typographie et couleurs suivent une échelle commune sur toutes les pages.
Responsive fiable : la grille et les points de rupture sont testés sur les navigateurs modernes.
Accessibilité de base : les composants intègrent des attributs ARIA et une gestion du clavier, à condition de respecter la structure HTML documentée.
Documentation de référence : chaque composant est documenté avec des exemples à copier sur getbootstrap.com.
Travail en équipe : un développeur qui rejoint le projet connaît déjà les classes.

C’est pourquoi on retrouve Bootstrap dans les back-offices, les intranets, les prototypes, les landing pages et de nombreux thèmes de CMS.

Comment créer un site avec Bootstrap 5 : les étapes

Schéma des étapes clés pour créer un site responsive avec Bootstrap 5, de l'installation par CDN aux composants — Créer un site avec Bootstrap 5 : les étapes clés

Étape 1 — Installer Bootstrap via le CDN

La méthode la plus simple : insérez le lien CSS dans le head et le script dans le bas du body. Le fichier bootstrap.bundle.min.js inclut Popper, nécessaire aux menus déroulants, infobulles et popovers. Remplacez le numéro de version par la dernière version stable indiquée sur le site officiel.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mon site Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-center my-5">Bonjour Bootstrap</h1>

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

La balise meta viewport est indispensable : sans elle, les téléphones affichent la page comme sur un écran de bureau réduit, et aucune règle responsive ne s’applique correctement.

Pour un projet avec un outil de build, installez plutôt le paquet npm :

npm install bootstrap

Étape 2 — Choisir un conteneur

Tout contenu se place dans un conteneur :

.container : largeur maximale fixe qui augmente par paliers selon l’écran, centrée ;
.container-fluid : toujours 100 % de la largeur ;
.container-md, .container-lg… : 100 % jusqu’au point de rupture indiqué, puis largeur fixe.

Étape 3 — Comprendre la grille Bootstrap

La grille repose sur Flexbox et sur 12 colonnes. Une ligne .row contient des colonnes .col-* dont la somme fait 12 (ou moins).

Préfixe	Largeur d’écran	Exemple de classe
(aucun)	moins de 576 px	`col-12`
sm	576 px et plus	`col-sm-6`
md	768 px et plus	`col-md-4`
lg	992 px et plus	`col-lg-3`
xl	1 200 px et plus	`col-xl-3`
xxl	1 400 px et plus	`col-xxl-2`

Une classe s’applique à partir de son point de rupture et au-dessus. Exemple : trois cartes empilées sur téléphone, deux par ligne sur tablette, trois par ligne sur ordinateur.

<div class="container">
  <div class="row g-4">
    <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>
</div>

La classe g-4 règle les gouttières (espaces entre colonnes) horizontales et verticales ; gx-* et gy-* les règlent séparément. Autres outils utiles :

.col sans chiffre : les colonnes se partagent l’espace à parts égales ;
.col-auto : la colonne prend la largeur de son contenu ;
.row-cols-md-3 sur la ligne : trois colonnes par ligne à partir de md, sans répéter la classe sur chaque enfant ;
.offset-md-2 : décale une colonne de deux unités ;
.order-first, .order-md-2 : change l’ordre d’affichage selon l’écran.

Étape 4 — Utiliser les classes utilitaires

Les utilitaires évitent d’écrire du CSS pour les réglages courants :

<section class="d-flex flex-column flex-md-row justify-content-between align-items-center p-4 mb-5 bg-light rounded-3 shadow-sm">
  <p class="fs-5 fw-semibold mb-3 mb-md-0">Prêt à lancer votre projet ?</p>
  <a href="#contact" class="btn btn-primary btn-lg">Nous contacter</a>
</section>

Les familles à connaître :

Espacements : m (marge) et p (padding), suivis d’un côté (t, b, s pour début, e pour fin, x, y) et d’une taille de 0 à 5, ou auto. Exemple : mt-3, px-md-5, mx-auto.
Affichage : d-none, d-block, d-flex, avec variantes responsives comme d-none d-lg-block (masqué sauf sur grand écran).
Flexbox : justify-content-*, align-items-*, flex-wrap, gap-3.
Texte : text-center, text-md-start, fw-bold, fs-4, text-truncate, text-uppercase.
Couleurs : text-primary, bg-dark, text-body-secondary, bg-success-subtle.
Bordures et ombres : border, rounded-3, shadow, shadow-sm.
Images : img-fluid rend une image fluide (largeur maximale 100 %).

Étape 5 — Assembler les composants Bootstrap

Les composants sans JavaScript (boutons, badges, cartes, alertes, fil d’Ariane, pagination, barres de progression) se construisent uniquement avec des classes. Exemple de carte :

<div class="card h-100">
  <img src="atelier.jpg" class="card-img-top" alt="Atelier de menuiserie">
  <div class="card-body">
    <h3 class="card-title h5">Atelier découverte</h3>
    <p class="card-text">Deux heures pour fabriquer votre première étagère.</p>
    <span class="badge text-bg-success">Places disponibles</span>
  </div>
  <div class="card-footer bg-transparent border-0">
    <a href="#" class="btn btn-outline-primary w-100">Réserver</a>
  </div>
</div>

La classe h-100 donne la même hauteur à toutes les cartes d’une ligne, un détail qui change tout visuellement.

Les composants interactifs utilisent des attributs data-bs-* interprétés par le script Bootstrap. Voici une barre de navigation qui se replie en menu « hamburger » sous 992 px :

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">MonSite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#menu" aria-controls="menu" aria-expanded="false"
            aria-label="Afficher le menu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Accueil</a></li>
        <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

La valeur de data-bs-target doit correspondre à l’id du bloc repliable. Le même principe s’applique aux modales (data-bs-toggle="modal"), aux accordéons, aux onglets et aux menus déroulants.

Étape 7 — Construire un formulaire

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-6">
    <label for="nom" class="form-label">Nom</label>
    <input type="text" class="form-control" id="nom" required>
    <div class="invalid-feedback">Merci d'indiquer votre nom.</div>
  </div>
  <div class="col-md-6">
    <label for="email" class="form-label">E-mail</label>
    <input type="email" class="form-control" id="email" required>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Envoyer</button>
  </div>
</form>

La grille s’utilise aussi dans les formulaires. Les messages invalid-feedback s’affichent quand le formulaire reçoit la classe was-validated, que l’on ajoute avec quelques lignes de JavaScript au moment de l’envoi.

Personnaliser le thème de Bootstrap 5

Un site Bootstrap non personnalisé se reconnaît au premier coup d’œil. Deux niveaux de personnalisation existent.

Les variables CSS, sans outil de build : Bootstrap expose des propriétés --bs-* que vous pouvez redéfinir dans votre propre feuille de style, chargée après celle de Bootstrap.

:root {
  --bs-body-font-family: "Inter", system-ui, sans-serif;
  --bs-link-color-rgb: 13, 110, 90;
  --bs-border-radius: 0.75rem;
}

Les variables Sass, pour une personnalisation complète : en installant Bootstrap via npm, vous modifiez $primary, $font-family-base ou $spacer avant d’importer Bootstrap. Toutes les classes générées (boutons, fonds, textes) reprennent alors votre couleur.

$primary: #0d6e5a;
$border-radius: .75rem;

@import "bootstrap/scss/bootstrap";

Depuis la version 5.3, les modes de couleur sont intégrés : l’attribut data-bs-theme="dark" sur la balise html (ou sur un seul composant) bascule l’affichage en thème sombre.

Bonne pratique : n’écrasez jamais les fichiers de Bootstrap. Placez vos surcharges dans une feuille séparée, pour pouvoir mettre à jour le framework sans perdre votre travail. Et versionnez votre projet dès le départ : notre guide pour apprendre Git explique comment.

Composants Bootstrap interactifs : modale, carrousel et accordéon

Une fois la barre de navigation maîtrisée, les autres composants JavaScript suivent exactement la même logique : un déclencheur porte data-bs-toggle et data-bs-target, et un bloc cible porte l’id correspondant et la classe du composant.

La modale affiche une fenêtre par-dessus la page, pour une confirmation, un formulaire court ou un détail produit. Elle se compose d’un bloc .modal qui contient .modal-dialog, puis .modal-content avec un en-tête, un corps et un pied. Ajoutez .modal-dialog-centered pour la centrer verticalement et .modal-lg pour l’élargir.

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#devis">Demander un devis</button>

<div class="modal fade" id="devis" tabindex="-1" aria-labelledby="devisTitre" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="devisTitre">Votre demande de devis</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body">Décrivez votre projet en quelques lignes.</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
      </div>
    </div>
  </div>
</div>

Le carrousel fait défiler des diapositives (.carousel-item, dont une seule porte la classe active au départ), avec des flèches de contrôle et des indicateurs. L’attribut data-bs-ride="carousel" lance le défilement automatique. Utilisez-le avec modération : un visiteur lit rarement au-delà de la première diapositive, et un défilement trop rapide nuit à l’accessibilité.

L’accordéon replie des blocs de contenu, idéal pour une foire aux questions ou des caractéristiques techniques. Chaque élément combine un bouton .accordion-button et un bloc .accordion-collapse. L’attribut data-bs-parent referme automatiquement les autres volets quand on en ouvre un.

Complétez avec les alertes refermables, les toasts pour les notifications temporaires, les onglets pour alterner entre plusieurs contenus et les offcanvas, des panneaux latéraux très utilisés pour les menus mobiles et les filtres de catalogue.

Bonnes pratiques pour un site responsive performant

Bootstrap fait gagner du temps, mais quelques règles évitent qu’un site devienne lourd ou difficile à maintenir :

Concevez mobile d’abord : écrivez les classes sans préfixe pour le téléphone, puis ajoutez -md ou -lg seulement quand l’affichage doit changer. Tester la page en réduisant la fenêtre du navigateur, ou avec le mode appareil des outils de développement, doit devenir un réflexe.
Gardez une sémantique propre : Bootstrap stylise, il ne structure pas. Utilisez header, nav, main, section et footer, et une hiérarchie de titres logique, même si une classe h5 modifie la taille visuelle d’un h3.
Allégez le poids : avec Sass, n’importez que les modules utilisés (grille, utilitaires, quelques composants) au lieu de tout le framework.
Soignez l’accessibilité : conservez les attributs aria-* des exemples officiels, renseignez le texte alternatif des images et vérifiez les contrastes si vous changez les couleurs du thème.
Optimisez les images : img-fluid adapte la taille à l’affichage, mais ne réduit pas le poids du fichier. Compressez vos images et proposez des formats modernes.
Documentez vos classes personnalisées : une petite feuille listant vos composants maison évite de réinventer les mêmes blocs à chaque page.

Les erreurs fréquentes avec Bootstrap (et comment les éviter)

Erreur	Conséquence	Solution
Oublier la balise `meta viewport`	Le site ne s’adapte pas aux téléphones	L’ajouter systématiquement dans le `head`
Colonnes placées hors d’une `.row`	Gouttières et alignements cassés	Toujours respecter conteneur > row > col
Somme des colonnes supérieure à 12	Retour à la ligne inattendu	Recompter les unités à chaque point de rupture
Charger `bootstrap.min.js` sans Popper	Menus déroulants et infobulles inactifs	Utiliser `bootstrap.bundle.min.js`
Utiliser `data-toggle` (syntaxe Bootstrap 4)	Composants sans réaction	Passer à `data-bs-toggle` et `data-bs-target`
Tooltips qui ne s’affichent pas	Ils ne s’activent pas automatiquement	Les initialiser en JavaScript, comme indiqué dans la documentation
Surcharger avec `!important` partout	CSS impossible à maintenir	Utiliser les variables CSS ou Sass
Empiler vingt utilitaires sur un élément	HTML illisible	Créer une classe personnalisée pour les motifs répétés

Pour les infobulles, l’initialisation tient en deux lignes :

document.querySelectorAll('[data-bs-toggle="tooltip"]')
  .forEach(el => new bootstrap.Tooltip(el));

Bootstrap 5, Tailwind CSS ou CSS natif : comparaison

Critère	Bootstrap 5	Tailwind CSS	CSS natif (Flexbox, Grid)
Approche	Composants + utilitaires	Utilitaires uniquement	Tout est à écrire
Rapidité pour un prototype	Très élevée	Élevée	Faible
Personnalisation graphique	Bonne via variables	Très grande	Totale
Composants JavaScript fournis	Oui (modales, carrousels, menus…)	Non	Non
Courbe d’apprentissage	Douce	Moyenne	Dépend du niveau CSS
Poids final	Moyen, réductible avec Sass	Faible (classes inutilisées retirées)	Minimal

Le bon choix dépend du projet : Bootstrap pour livrer vite une interface cohérente, Tailwind CSS pour un design sur mesure, CSS natif pour un site très léger. Et pour rendre vos pages dynamiques au-delà des composants fournis, la suite logique est d’apprendre JavaScript.

Comparatif de Bootstrap 5, Tailwind CSS et du CSS natif : approche, composants, personnalisation et poids — Bootstrap 5, Tailwind CSS ou CSS natif ?

Comment apprendre Bootstrap 5 et progresser ?

Notre parcours conseillé :

Prérequis : les bases du HTML (structure, balises sémantiques, formulaires) et du CSS (sélecteurs, modèle de boîte, Flexbox).
Jour 1 : installation, conteneurs, grille et points de rupture. Reproduisez une mise en page simple en trois colonnes responsive.
Jours 2 et 3 : utilitaires d’espacement, d’affichage, de flexbox et de couleur. Construisez un header et une section « hero ».
Jours 4 et 5 : composants statiques puis interactifs : cartes, barre de navigation, carrousel, accordéon, modale, formulaires.
Ensuite : un site complet d’une page, du header au formulaire de contact, puis la personnalisation du thème.

Pour être accompagné sur tout ce parcours, la formation pour créer des sites responsive avec Bootstrap 5 d’EspritAcadémique dure 8 heures, sans prérequis, avec les fichiers sources fournis. Elle aborde notamment :

la philosophie du framework, les variables CSS et le thème ;
les conteneurs, les points de rupture et la grille, avec exercices de mise en page ;
les utilitaires : couleurs, bordures, affichage, flex, espacements, positionnement ;
les composants sans JavaScript (boutons, cartes, pagination) puis avec JavaScript (navbar, carrousel, modales, toasts) ;
les formulaires et leur validation ;
un projet final en trois parties pour assembler un site complet.

Vous pouvez aussi parcourir le programme détaillé de cette formation Bootstrap avant de vous inscrire.

En résumé

Bootstrap 5 permet de construire un site responsive rapidement grâce à sa grille de 12 colonnes, ses six points de rupture, ses utilitaires et ses composants en JavaScript natif. Respectez la structure conteneur, ligne, colonne, pensez mobile d’abord, utilisez les attributs data-bs-* et personnalisez le thème avec les variables plutôt qu’avec des surcharges. Avec de solides bases en HTML et CSS, quelques jours de pratique suffisent pour livrer une première page professionnelle.

Sources et documentation officielle

Questions fréquentes

Faut-il connaître HTML et CSS pour utiliser Bootstrap 5 ?

Oui, au moins les bases. Bootstrap s'utilise en ajoutant des classes à vos balises HTML : vous devez donc savoir structurer une page (sections, titres, listes, formulaires). Des notions de CSS aident à comprendre ce que font les classes et à les compléter. Quelques heures sur HTML et CSS suffisent pour démarrer, et Bootstrap vous fera ensuite progresser sur la logique responsive.

Bootstrap 5 est-il encore utilisé ?

Oui. Bootstrap reste l'un des frameworks CSS les plus répandus, présent dans de nombreux thèmes, back-offices, intranets et projets d'entreprise. Il est apprécié pour sa documentation complète, sa stabilité et ses composants accessibles. Des alternatives comme Tailwind CSS ont gagné du terrain, mais Bootstrap reste un choix solide pour livrer rapidement une interface cohérente.

Quelle différence entre Bootstrap 4 et Bootstrap 5 ?

Bootstrap 5 abandonne jQuery au profit du JavaScript natif, renomme les attributs data-* en data-bs-*, ajoute le point de rupture xxl, une API d'utilitaires, les classes de gouttières g-*, les variables CSS et, depuis la version 5.3, les modes de couleur clair et sombre. Certaines classes ont aussi changé, comme ml- et mr- devenues ms- et me-.

Comment installer Bootstrap 5 ?

La méthode la plus rapide consiste à coller dans votre page le lien CSS et le script JavaScript fournis par le CDN officiel, indiqués sur getbootstrap.com. Pour un projet plus structuré, installez le paquet avec npm install bootstrap, puis importez les fichiers dans votre outil de build. Cette seconde méthode permet de personnaliser le thème avec Sass.

Bootstrap ou Tailwind CSS : lequel choisir ?

Bootstrap fournit des composants finis (barre de navigation, modales, carrousels) et un style par défaut cohérent : idéal pour livrer vite. Tailwind CSS propose uniquement des classes utilitaires de bas niveau : plus de liberté graphique, mais davantage de travail pour construire chaque composant. Pour un back-office ou un prototype, Bootstrap est souvent plus rapide ; pour un design très personnalisé, Tailwind est plus souple.

Combien de temps faut-il pour apprendre Bootstrap 5 ?

Avec des bases en HTML et CSS, une journée suffit pour comprendre la grille et construire une page responsive simple. Comptez une à deux semaines de pratique pour maîtriser les utilitaires, les composants JavaScript, les formulaires et la personnalisation du thème. Réaliser un site complet de bout en bout reste le meilleur moyen de consolider ces acquis.