Module 1Les bases de Bootstrap
Chapitre 1 sur 9
Découvrir et installer Bootstrap 5
Comprendre ce qu'est Bootstrap, l'installer par CDN et utiliser les conteneurs.
- ≈ 95 min
- 3 leçons
- 4 vidéos
- 2 exercices
Module 1Les bases de Bootstrap
Chapitre 1 sur 9
Comprendre ce qu'est Bootstrap, l'installer par CDN et utiliser les conteneurs.
Objectifs
Avec ce chapitre, tu sauras…
.container et .container-fluid ;Tu sais écrire du CSS à la main. Mais dans un projet réel, on refait sans cesse les mêmes choses : une grille responsive, des boutons, un menu, des formulaires propres. Bootstrap fournit tout cela, testé sur tous les navigateurs, en ajoutant simplement des classes à ton HTML.
Leçon 1
Tableau: Ce que Bootstrap contient
| Partie | Rôle | Exemples |
|---|---|---|
| reboot | une base CSS qui harmonise les navigateurs | box-sizing, marges, polices |
| grille | mise en page responsive en 12 colonnes | .container, .row, .col-md-6 |
| utilitaires | une classe = une propriété CSS | .mt-3, .text-center, .d-flex |
| composants | des éléments d'interface complets | boutons, cartes, navbar, modal |
| JavaScript | le comportement des composants interactifs | ouvrir un menu, une fenêtre modale |
| Avantages | Limites |
|---|---|
| très rapide pour prototyper et livrer | les sites se ressemblent si on ne personnalise pas |
| responsive et accessible par défaut | fichier CSS assez lourd si on n'utilise pas tout |
| documentation excellente | des classes nombreuses dans le HTML |
| connu de toutes les équipes | il faut connaître le CSS pour aller au-delà |
Vidéo · À regarder
FRTutoriel BOOTSTRAP 5 - 01 - Présentation du framework CSS
Seb Code · YouTube
Leçon 2
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
Vidéo · À regarder
FRLeçon 3
| Classe | Largeur |
|---|---|
.container | largeur maximale fixe qui change à chaque point de rupture (540, 720, 960, 1140, 1320 px) |
.container-fluid | 100 % de la largeur, à tous les écrans |
.container-md | 100 % jusqu'au point md, puis comme .container |
| Nom | Infixe | À partir de |
|---|---|---|
1Bootstrap s'utilise principalement en ajoutant…
2Ton fichier CSS doit être relié…
3Quel conteneur fait toujours 100 % de la largeur ?
4Le point de rupture md commence à…
5Quel fichier JS faut-il pour les menus déroulants ?
6Bootstrap 5 a abandonné…
L'essentiel du chapitre
bootstrap.min.css dans le head (avant ton CSS), bootstrap.bundle.min.js à la fin du body..container (largeur max), .container-fluid (100 %).sm 576, md 768, lg 992, xl 1200, xxl 1400 ; mobile first.Apprendre BOOTSTRAP 5 & HTML en créant son CV Web [TUTO COMPLET]
H2Prog · YouTube
| (aucun) |
| 0 px |
| Small | sm | 576 px |
| Medium | md | 768 px |
| Large | lg | 992 px |
| Extra large | xl | 1200 px |
| Extra extra large | xxl | 1400 px |
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
Tableau: Avantages et limites
Le CSS à la main, c'est fabriquer tes meubles toi-même : tout est sur mesure, mais c'est long. Bootstrap, c'est un magasin de meubles en kit : tu assembles vite des pièces solides et standard, puis tu les peins à ta couleur. Un bon intégrateur sait faire les deux.
La présentation du framework par Seb Code, premier épisode d'une série française de 23 vidéos sur Bootstrap 5. Regarde-la en entier.
Un CDN (Content Delivery Network) est un serveur qui héberge les fichiers de Bootstrap : il suffit de les relier dans ta page, rien à télécharger.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma page Bootstrap</title>
<!-- 1. Le CSS de Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 2. Ton CSS, APRÈS celui de Bootstrap -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-primary">Bonjour Bootstrap !</h1>
<button class="btn btn-success">Mon premier bouton</button>
</div>
<!-- 3. Le JavaScript de Bootstrap, à la fin du body -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>bootstrap.bundle.min.js contient aussi Popper, nécessaire aux menus déroulants et infobulles ;En entreprise, on installe souvent Bootstrap avec npm (npm install bootstrap) pour le personnaliser avec Sass (chapitre 8). Pour apprendre, le CDN suffit. Copie toujours les liens depuis getbootstrap.com pour avoir la dernière version.
La mise en place (anglais) : où trouver les liens et comment les ajouter à la page.
Tout contenu Bootstrap se place dans un conteneur, qui centre la page et ajoute des marges latérales.
Tableau: Les trois conteneurs
Tableau: Les points de rupture de Bootstrap 5
Sur getbootstrap.com, trouve la page du composant « Badges ». Écris le code d'un titre « Messages » suivi d'un badge rouge affichant « 4 ».
Crée index.html avec le modèle de départ. Dans un .container, ajoute un titre h1, un paragraphe et trois boutons : btn btn-primary, btn btn-outline-secondary et btn btn-danger. Redimensionne la fenêtre et observe la largeur du conteneur dans les DevTools.
L'ajout de Bootstrap dans un projet réel, expliqué en français par H2Prog. Ce tutoriel sera ton fil rouge pour la grille et le projet final.
Bootstrap est mobile first : une classe avec md (par exemple col-md-6) s'applique à partir de 768 px, et au-dessus. Sans infixe, elle s'applique partout. C'est exactement une media query en min-width.
Les conteneurs et les points de rupture (anglais). Redimensionne ta fenêtre en même temps pour voir le .container changer de largeur.