Skip to Content
BootstrapPartie 1 — Découvrir Bootstrap1.4 — La structure des fichiers dist

1.4 — La structure des fichiers dist

⏱️ TL;DR — Le paquet Bootstrap livre plusieurs variantes du CSS et du JS dans dist/. Retenez : bootstrap.css (tout), bootstrap-grid.css (grille + flex seuls), bootstrap-reboot.css (le reset seul), bootstrap-utilities.css (utilitaires seuls), les variantes .rtl.css (droite-à-gauche) et, côté JS, bootstrap.bundle.js (avec Popper) vs bootstrap.js (sans).

🎯 Objectifs

  • Savoir quel fichier inclure selon le besoin.
  • Distinguer les variantes CSS (grille seule, reboot, utilitaires, RTL).
  • Distinguer bundle vs séparé côté JS.

L’arborescence dist/

bootstrap/dist/
├── css/
│   ├── bootstrap.css              # tout : reboot + grille + composants + utilitaires
│   ├── bootstrap.min.css
│   ├── bootstrap.rtl.css          # version droite-à-gauche
│   ├── bootstrap-grid.css         # UNIQUEMENT la grille + flex utilities
│   ├── bootstrap-reboot.css       # UNIQUEMENT le reset normalisé
│   ├── bootstrap-utilities.css    # UNIQUEMENT les classes utilitaires
│   └── *.min.css / *.map
└── js/
    ├── bootstrap.js               # composants JS, SANS Popper
    ├── bootstrap.bundle.js        # composants JS + Popper (recommandé)
    └── *.min.js / *.esm.js / *.map

Quel CSS choisir ?

FichierContenuQuand
bootstrap.cssToutCas général
bootstrap-grid.cssGrille + flex + display responsiveVous ne voulez que la grille
bootstrap-reboot.cssLe reset (normalisation)Poser des bases neutres sans le reste
bootstrap-utilities.cssLes utilitaires seulsAjouter des utilitaires à un CSS maison
*.rtl.cssVersion miroirLangues droite-à-gauche (arabe, hébreu…) — voir Partie 12

Les variantes -grid, -reboot, -utilities existent parce qu’on n’a pas toujours besoin de tout Bootstrap. Pour un contrôle encore plus fin, on recompile en Sass (voir Partie 8).

Quel JS choisir ?

  • bootstrap.bundle.min.js — inclut Popper. C’est le choix par défaut.
  • bootstrap.min.js — sans Popper. À réserver si vous gérez Popper vous-même, ou si vous n’utilisez aucun composant qui en dépend.
  • bootstrap.esm.js — la version modules ES, pour l’import dans un bundler.

Les fichiers .map

Les fichiers .map (source maps) relient le CSS/JS minifié au code source pour le débogage dans le navigateur. Ne les servez pas en production si vous voulez masquer les sources, mais gardez-les en dev.

⚠️ Piège — Charger bootstrap.js (sans bundle) puis s’étonner que les tooltips ne s’affichent pas. Sans Popper, tout composant « flottant » est cassé. Utilisez le bundle en cas de doute.

💡 Pour un dev React — Avec un bundler, vous importerez rarement ces fichiers dist directement ; vous ferez import 'bootstrap/dist/css/bootstrap.min.css' et, pour le JS, import { Modal } from 'bootstrap' (qui pointe vers l’ESM). Le tree-shaking se charge d’éliminer les composants non importés.

✏️ Exercices

  1. Vous voulez uniquement la grille responsive de Bootstrap dans un projet qui a déjà son propre CSS. Quel fichier ?

✅ Solution

bootstrap-grid.css — il ne contient que la grille et les utilitaires flex/display.

  1. Vos popovers ne s’affichent pas alors que le JS est bien chargé. Quelle est la cause la plus probable ?

✅ Solution

Vous avez chargé bootstrap.js (sans Popper) au lieu de bootstrap.bundle.js.

🧠 Quiz de révision

1. Que contient bootstrap-utilities.css ?

Uniquement les classes utilitaires (spacing, couleurs, display…), sans composants ni grille.

2. Différence entre bootstrap.js et bootstrap.bundle.js ?

Le bundle embarque Popper ; l’autre non.

3. À quoi servent les fichiers .rtl.css ?

Fournir la version droite-à-gauche pour les langues comme l’arabe ou l’hébreu.

4. À quoi sert un fichier .map ?

C’est une source map : elle relie le code minifié au code source pour le débogage.

5. Quel fichier CSS pour n’avoir QUE le reset ?

bootstrap-reboot.css.

Chapitre suivant : 1.5 — Votre première page

1.3 — Installation : CDN vs npm1.5 — Votre première page