Guide Bootstrap 5 : Grille 12 colonnes, Composants et Layouts

Introduction et objectifs

Ce guide présente Bootstrap 5.0 et détaille la structuration d'interfaces avec la grille à 12 colonnes, les composants .navbar et .card ainsi que le rôle des utilitaires .d-flex.

Synthèse du projet final : intégration d'un formulaire aux composants .card et images responsives.

Configuration HTML5

Installer la base HTML5 implique d'ajouter meta viewport, charset=utf-8, un fichier index.html contenant le lien vers bootstrap.min.css (CDN ou local) et d'inclure en fin de page bootstrap.bundle.min.js v5.0 pour activer les plugins collapse et dropdown.

Ce que vous allez apprendre

• Configurer la structure HTML5 et les balises de base (header, nav, main) et relier bootstrap.min.css pour hériter des composants CSS.
• Comprendre la logique de la grille à 12 colonnes et les breakpoints sm/md/lg, illustrée avec des combinaisons de classes comme .col-12 et .col-md-6.
• Personnaliser la typographie en combinant .display-4, .lead et les utilitaires d'espacement .m-* / .p-* pour régler marges et padding sur headings et cartes.
• Implémenter une navigation responsive en utilisant .navbar-expand-md et les attributs data-bs-toggle / data-bs-target pour contrôler le collapse.
• Mise en pratique : création d'un CV structuré avec le système de grille et les composants .card.

Notions clés et cas d'usage

La grille Bootstrap s'appuie sur flexbox : les éléments .row sont rendus via display:flex pour aligner et répartir les .col-* y compris lors d'une imbrication de colonnes.

Les utilitaires d'espacement (.m-*, .p-*) permettent un contrôle fin des espacements — par exemple mb-3 pour une marge-bottom standard et p-2 pour un padding uniforme à l'intérieur d'une .card.

Pour les images responsives, la classe .img-fluid contraint la largeur à 100% du conteneur; le guide utilise .img-fluid pour les photos de profil et vignettes du CV.

La navbar responsive démontrée associe .navbar-expand-md au bundle JavaScript (popper inclus) afin que le bouton hamburger apparaisse sous 768px, géré par le mécanisme de collapse du bundle.

Prérequis

• Savoir structurer une page avec HTML5 en utilisant nav, header et section pour placer les composants Bootstrap.
• Connaître les principes de flexbox et les media queries CSS3 pour interpréter l'effet des breakpoints sm/md/lg sur les layouts.
• Disposer de bootstrap.min.css et bootstrap.bundle.min.js v5.0 sur l'environnement de développement (ou via CDN) et tester dans un navigateur moderne (Chrome 80+ ou Firefox 75+).

Mise en garde : le guide souligne une différence d'API par rapport à Bootstrap 4 — Bootstrap 5.0 fonctionne sans jQuery, ce qui modifie l'initialisation des composants JavaScript.

Mis à jour le 10/03/2026