Skip to Content
BootstrapPartie 10 — Le JavaScript de Bootstrap10.3 — Bundle, plugins & Popper

10.3 — Bundle, plugins & Popper

⏱️ TL;DR — Trois façons de charger le JS : le bundle (bootstrap.bundle.js, tout + Popper), le fichier séparé (bootstrap.js, sans Popper), ou des imports ES ciblés (import { Modal } from 'bootstrap') pour le tree-shaking. Popper est requis par dropdown, tooltip, popover.

🎯 Objectifs

  • Choisir le bon mode de chargement.
  • N’importer que les plugins utiles.
  • Savoir quels composants dépendent de Popper.

Les trois modes

<!-- 1. Bundle : tout + Popper (le plus simple) -->
<script src=".../bootstrap.bundle.min.js"></script>
// 2. Import global (bundler)
import * as bootstrap from 'bootstrap'
 
// 3. Imports ciblés (tree-shaking → bundle plus léger)
import { Modal } from 'bootstrap'
import Dropdown from 'bootstrap/js/dist/dropdown'

Qui dépend de Popper ?

ComposantPopper requis ?
Dropdown✅
Tooltip✅
Popover✅
Modal, Offcanvas, Toast, Collapse, Tab, Carousel, ScrollSpy, Alert❌

Si vous n’utilisez aucun composant flottant, bootstrap.js (sans Popper) suffit et allège la page.

Import ciblé avec Popper

import Tooltip from 'bootstrap/js/dist/tooltip'
// Popper est importé automatiquement par le module tooltip
new Tooltip(document.querySelector('[data-bs-toggle="tooltip"]'))

La liste des plugins

Alert, Button, Carousel, Collapse, Dropdown, Modal, Offcanvas, Popover, ScrollSpy, Tab, Toast, Tooltip.

Où placer le script ?

Juste avant </body> (le DOM est prêt) ou avec defer dans le <head>. La Data API s’initialise automatiquement au chargement du DOM.

⚠️ Piège — Charger bootstrap.js (sans Popper) alors qu’on utilise des tooltips : ils ne s’affichent pas et une erreur Popper apparaît en console. En cas de doute, le bundle.

💡 Pour un dev React — Avec un bundler moderne, préférez les imports nommés (import { Modal } from 'bootstrap') : le tree-shaking élimine les plugins non utilisés. Mais rappelez-vous que le JS natif s’intègre mal au cycle de vie React — voir Partie 11.

✏️ Exercices

  1. Vous n’utilisez que des modales et des collapses. Quel fichier JS suffit ?

✅ Solution

bootstrap.js (sans Popper), car ni modal ni collapse n’en dépendent.

  1. Importer uniquement le plugin Dropdown dans un projet Vite.

✅ Solution

import Dropdown from 'bootstrap/js/dist/dropdown'.

🧠 Quiz de révision

1. Que contient le bundle de plus que bootstrap.js ?

Popper.

2. Trois composants qui nécessitent Popper ?

Dropdown, tooltip, popover.

3. Comment n’embarquer qu’un plugin ?

Import ES ciblé (import { Modal } from 'bootstrap').

4. Où placer la balise script ?

Avant </body> ou en defer.

5. La modale a-t-elle besoin de Popper ?

Non.

Chapitre suivant : 10.4 — Le monde sans jQuery

10.2 — Les événements10.4 — Le monde sans jQuery