Découverte d’un framework CSS : Bootstrap

Partie 1 : overview

Vous visionnez les 3 vidéos suivantes SANS REPRODUIRE les actions (sauf consignes contraires)

Introduction (2 minutes)

Overview 1 : prise de contact (7 minutes)

[A LIRE EN FULL SCREEN]

Overview 2 : les « containers » (22 minutes)

[A LIRE EN FULL SCREEN]

Partie 2 : prise en main

Mobile

Mobile – Nav Dépliée

Desktop

Ce que l’on va construire

Ce chapitre est une découverte guidée, sans installation. L’objectif n’est pas de mémoriser des classes CSS, mais d’apprendre à repérer, comprendre et réutiliser un composant tout fait, proposé par la documentation officielle d’un framework — une compétence tout aussi importante que d’écrire du CSS soi-même.

Le résultat final, en langage naturel : une page complète composée de plusieurs blocs empilés — un menu de navigation avec menu « burger », un message d’accueil, une grille de texte en colonnes, une liste de fonctionnalités, des cartes illustrées, un slider d’images, une FAQ dépliable, et une fenêtre pop-up. Chacun de ces blocs est un composant Bootstrap trouvé sur sa documentation officielle, copié-collé, puis légèrement adapté.

Qu’est-ce qu’un framework CSS ?

Un framework CSS est un ensemble de fichiers CSS (et parfois JavaScript) déjà écrits par quelqu’un d’autre, qui fournissent des styles et des composants prêts à l’emploi : boutons, menus, grilles de mise en page, fenêtres pop-up, etc. Plutôt que d’écrire tout ce CSS soi-même, on appelle ces fichiers dans sa page — exactement comme on l’a fait avec Google Fonts.

Principaux avantages :

  • Rapidité — des interfaces propres et cohérentes en quelques classes, sans écrire de CSS from scratch
  • Cohérence visuelle — tous les composants partagent le même style de base (espacements, couleurs, typographie)
  • Responsive « gratuit » — les grilles et composants s’adaptent déjà aux mobiles, tablettes, écrans larges
  • Composants prêts à l’emploi — menus, cartes, fenêtres pop-up, sliders… déjà codés, testés, documentés

Tailwind vs Bootstrap

Il existe plusieurs frameworks CSS. Les deux plus utilisés aujourd’hui sont Bootstrap et Tailwind CSS, mais ils fonctionnent sur des philosophies opposées.

  • Bootstrap fournit des composants tout faits, avec des classes qui décrivent un rôle (card, navbar, btn). On assemble sa page en collant des blocs de composants.
  • Tailwind fournit des classes utilitaires très petites, chacune avec un seul rôle précis (px-4 pour un padding horizontal, flex pour un affichage flexbox, text-lg pour une taille de texte). On construit ses propres composants en combinant ces classes.

Point important : la documentation officielle de Bootstrap est entièrement gratuite, composants inclus. La bibliothèque de composants prêts à l’emploi de Tailwind, appelée Tailwind Plus, est en revanche payante — seule la base (les classes utilitaires) est gratuite. C’est pour cette raison que la partie pratique de ce chapitre se fait avec Bootstrap.

Comment appeler Bootstrap dans une page

Comme pour toute bibliothèque externe, il faut deux appels, à deux endroits différents de la page :

  • Le CSS (obligatoire) se charge dans le <head>
  • Le JavaScript (optionnel) se charge juste avant </body>

Dans le <head>, on charge le CSS de Bootstrap depuis le CDN :

<!-- CSS de Bootstrap, chargé depuis le CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Le CSS seul suffit pour l’apparence (boutons, cartes, grille, couleurs…). Mais certains composants sont interactifs — un menu burger qui s’ouvre, une fenêtre pop-up, un slider qui défile, une FAQ qui se déplie. Ces composants ont besoin d’un peu de JavaScript pour fonctionner. On ajoute donc, juste avant </body> :

<!-- JavaScript de Bootstrap, chargé depuis le CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

On ne l’explique pas en détail ici — le JavaScript sera vu plus tard — mais sachez qu’il faut l’ajouter dès qu’un composant a besoin d’interactivité.

Quels composants ont besoin de ce script ?

  • Ont besoin du JavaScript : menu burger (navbar), slider (carousel), FAQ dépliable (accordion), fenêtre pop-up (modal)
  • N’en ont pas besoin : message d’accueil (alert), grille de colonnes, liste de fonctionnalités (list group), cartes (card)

Le squelette de départ

Avant de commencer, créez un fichier HTML avec cette base — c’est le point de départ commun à tout l’exercice. Elle contient déjà les deux appels CDN vus juste au-dessus.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ma page Bootstrap</title>

  <!-- CSS Bootstrap (CDN) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- Collez ici, les uns à la suite des autres, les 8 blocs de l'exercice -->

  <!-- JS Bootstrap (CDN) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Tous les blocs de l’exercice (1 à 8) viendront se coller, les uns à la suite des autres, à l’intérieur du <body>, à l’endroit indiqué par le commentaire.

La règle du container

Avant de commencer à copier les blocs, une règle unique à connaître, qui s’appliquera aux 8 blocs de l’exercice, sans exception :

Chaque bloc de code copié depuis la documentation Bootstrap doit être enveloppé dans une balise <div class="container my-4"> avant d’être collé dans la page.

<div class="container my-4">
  <!-- le bloc copié depuis la doc vient ici -->
</div>

Deux choses à bien comprendre dans cette classe :

  • container n’est pas un nom que l’on choisit librement — c’est le nom exact d’une classe définie dans le CSS de Bootstrap. C’est ce nom précis qui permet à Bootstrap de centrer le contenu et de lui ajouter un peu de marge sur les côtés. Une faute de frappe (containeur, Container avec une majuscule…) et Bootstrap ne la reconnaît plus : aucun style ne s’applique.
  • my-4 est une classe utilitaire d’espacement. Elle se décompose en trois parties : m pour margin (la marge extérieure), y pour l’axe vertical (donc en haut et en bas), et 4 pour la valeur d’espacement, sur une échelle Bootstrap qui va de 0 (aucun espace) à 5 (beaucoup d’espace). my-4 ajoute donc un espace assez généreux au-dessus et en-dessous du bloc, pour que les 8 blocs de la page ne soient pas collés les uns aux autres.

En résumé : copier un bloc depuis la doc ne suffit pas à le coller tel quel dans le <body> — il faut systématiquement l’entourer de ce <div class="container my-4">...</div> avant de le coller.

Le brief : la page à construire

Contrairement à un exercice en « libre choix », voici précisément la page à reconstruire, bloc par bloc, dans cet ordre. Pour chaque bloc, une adresse précise mène directement à l’exemple correspondant sur la documentation officielle de Bootstrap. Le code n’est pas fourni ici : c’est à vous d’aller le chercher, de le copier, de le coller dans votre page (dans son container my-4, comme vu ci-dessus), puis d’adapter le texte.

  1. Menu de navigation avec burger — getbootstrap.com/docs/5.3/components/navbar/#nav
  2. Message d’accueil — getbootstrap.com/docs/5.3/components/alerts/#additional-content
  3. Grille de texte en 3 colonnes — getbootstrap.com/docs/5.3/layout/grid/#equal-width
  4. Liste de fonctionnalités — getbootstrap.com/docs/5.3/components/list-group/#custom-content
  5. Cartes illustrées — getbootstrap.com/docs/5.3/components/card/#example
  6. Slider d’images — getbootstrap.com/docs/5.3/components/carousel/#indicators
  7. FAQ dépliable — getbootstrap.com/docs/5.3/components/accordion/#example
  8. Fenêtre pop-up — getbootstrap.com/docs/5.3/components/modal/#live-demo

Consigne, étape par étape

  1. Créez un fichier HTML avec le squelette de départ vu plus haut.
  2. Pour chacun des 8 blocs, dans l’ordre :
    • Ouvrez l’adresse fournie — elle mène directement à la bonne section de la documentation
    • Repérez le bloc de code affiché (encadré gris avec le HTML)
    • Copiez-le intégralement
    • Entourez-le d’un <div class="container my-4">...</div>
    • Collez le tout dans le <body>, à la suite du bloc précédent
    • Adaptez légèrement les textes (titres, paragraphes) — la structure et les classes ne changent pas
  3. Vérifiez que les deux appels CDN (CSS dans le <head>, JavaScript avant </body>) sont toujours en place — sans eux, rien ne s’affichera correctement, et les blocs interactifs (navbar, carousel, accordion, modal) ne fonctionneront pas.

Corrigé complet

Essayez d’abord par vous-même. Le corrigé ci-dessous assemble les 8 blocs dans l’ordre attendu, chacun dans son container my-4.

Partie 3 : et les thèmes Bootstrap ?



Il est possible de changer l’apparence de Bootstrap sans tout reconstruire. Plusieurs approches existent, du plus simple au plus poussé :

La méthode la plus directe consiste à surcharger les couleurs par-dessus le CSS de Bootstrap : on écrit son propre CSS, chargé après celui de Bootstrap, qui vient redéfinir certaines classes (par exemple, redonner une autre couleur à .btn-primary). C’est simple à comprendre, mais un peu répétitif si on veut tout changer.

Une méthode plus propre, réservée à ceux qui utilisent Sass (une version avancée du CSS, avec des variables), consiste à modifier directement les variables de couleur de Bootstrap avant qu’il ne génère son CSS final — cette méthode demande un environnement de développement (pas juste un CDN), donc plus technique.

Il existe aussi des thèmes tout faits : par exemple, Bootswatch propose une vingtaine de thèmes gratuits (licence MIT), qui suffit à changer complètement l’ambiance visuelle en remplaçant simplement le fichier CSS appelé. Des thèmes plus élaborés, vendus sur des marketplaces comme WrapBootstrap, existent aussi en version payante pour des besoins plus spécifiques.

Attention cependant : même une méthode aussi simple en apparence demande un minimum de compréhension. Savoir où remplacer le fichier CSS, comprendre pourquoi ça fonctionne (on remplace un fichier par un autre qui porte les mêmes noms de classes, mais avec des styles différents), et être capable de vérifier que rien n’est cassé après le changement — tout ça suppose d’avoir déjà assimilé les bases vues dans ce chapitre (CDN, head, body, rôle du CSS). Ce n’est pas parce qu’un outil semble « clé en main » qu’il dispense de comprendre ce qu’il fait.

Enfin, certains outils en ligne proposent de générer un thème personnalisé automatiquement, en configurant des couleurs via une interface graphique. Attention cependant : la qualité de ces générateurs est inégale, et beaucoup sont payants ou peu fiables — mieux vaut privilégier une ressource reconnue plutôt qu’un outil tiers inconnu.

En pratique

Voici, à titre expérimental, une application maison qui vous permet de tester votre propre thème. Réglez vos couleurs, cliquez sur « Télécharger le CSS », puis il vous suffit de récupérer ce fichier et de l’ajouter à votre projet.

Un point essentiel à respecter : ce fichier CSS généré doit être appelé juste après le lien vers le CSS de Bootstrap, dans le <head> — jamais avant. Le navigateur applique le CSS dans l’ordre où il est écrit : si deux règles ciblent le même élément, c’est la dernière lue qui l’emporte. Si votre fichier personnalisé est appelé avant Bootstrap, ce dernier sera chargé en second et écrasera toutes vos couleurs, comme si votre fichier n’avait jamais existé.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-custom.css" rel="stylesheet">


Voici le résultat du bouton « All in Red « 

VPG CUSTOMIZER