Skip to Content
BootstrapPartie 1 — Découvrir Bootstrap1.3 — Installation : CDN vs npm

1.3 — Installation : CDN vs npm

⏱️ TL;DR — Deux voies. Le CDN (une balise <link> + une <script>) : zéro build, parfait pour tester ou pour un site simple. npm (npm i bootstrap) : indispensable dès que vous voulez personnaliser en Sass, purger le CSS inutile ou intégrer à un bundler (Vite, Webpack, Next.js).

🎯 Objectifs

  • Installer Bootstrap par CDN et par npm.
  • Choisir la bonne méthode selon le projet.
  • Comprendre le rôle de Popper pour le JS.

Méthode 1 — CDN (le plus rapide)

Collez ces deux lignes ; c’est tout.

<!-- Dans <head> : le CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-..." crossorigin="anonymous">
 
<!-- Avant </body> : le JS (bundle = Bootstrap + Popper) -->
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-..." crossorigin="anonymous"></script>
  • ✅ Avantages : aucun outillage, mise en cache partagée, démarrage immédiat.
  • ❌ Limites : impossible de personnaliser en Sass, on charge tout le CSS (même ce qu’on n’utilise pas).

L’attribut integrity (SRI) garantit que le fichier n’a pas été altéré. Copiez la valeur exacte depuis getbootstrap.com .

Méthode 2 — npm (pour personnaliser et bundler)

npm install bootstrap@5.3.8
# Popper est requis pour dropdowns, tooltips, popovers :
npm install @popperjs/core

Ensuite, dans votre point d’entrée JS/CSS :

// Importer tout le JS…
import * as bootstrap from 'bootstrap'
// …ou seulement ce dont vous avez besoin :
import { Modal, Tooltip } from 'bootstrap'
// Importer tout le CSS…
@import "bootstrap/scss/bootstrap";
// …ou personnaliser (voir Partie 8) :
@import "bootstrap/scss/functions";
// vos variables ici
@import "bootstrap/scss/variables";
@import "bootstrap/scss/bootstrap";
  • ✅ Avantages : personnalisation Sass totale, tree-shaking du JS, purge du CSS, versionnage verrouillé.
  • ❌ Limites : nécessite un bundler (Vite, Webpack, etc.).

Le rôle de Popper

Certains composants (dropdown, tooltip, popover) ont besoin de Popper pour se positionner intelligemment près de leur déclencheur. Deux options :

  • Le bundle (bootstrap.bundle.js) inclut déjà Popper.
  • Le fichier séparé (bootstrap.js) ne l’inclut pas : chargez Popper à part.

Quel choix ?

💡 Pour un dev React — Dans un projet Next.js / Vite, prenez npm. Vous importerez bootstrap/dist/css/bootstrap.min.css (le CSS compilé) ou, mieux, un fichier Sass où vous personnalisez d’abord les variables. Le JS natif est à éviter avec le SSR — voir Partie 11.

✏️ Exercices

  1. Vous montez un prototype dans un seul fichier .html. CDN ou npm ?

✅ Solution

CDN : deux balises, aucun build. Parfait pour un fichier unique.

  1. Votre dropdown ne se positionne pas. Quelle dépendance manque probablement ?

✅ Solution

Popper — utilisez bootstrap.bundle.js (qui l’inclut) ou chargez Popper séparément.

🧠 Quiz de révision

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

Popper, la lib de positionnement des dropdowns/tooltips/popovers.

2. Peut-on personnaliser les variables Sass avec le CDN ?

Non. Il faut passer par npm pour recompiler le Sass.

3. À quoi sert l’attribut integrity sur le CDN ?

Vérifier l’intégrité du fichier (Subresource Integrity) contre toute altération.

4. Où placer la balise <script> du bundle ?

Juste avant </body> (ou en defer), pour que le DOM soit chargé.

5. Quel avantage clé de npm pour la taille finale ?

Le tree-shaking du JS et la purge / build Sass minimal du CSS.

Chapitre suivant : 1.4 — La structure des fichiers dist

1.2 — Quand (ne pas) utiliser Bootstrap1.4 — La structure des fichiers dist