06 - Introduction à Bootstrap
Article publié le Dimanche 5 avril 2026 • 0 vue
Jusqu’à présent, nous avons créé un site avec HTML et CSS.
Mais écrire tout le CSS à la main peut être long.
Bootstrap est un framework qui permet de créer rapidement des interfaces modernes.
1. Qu’est-ce que Bootstrap ?
Bootstrap est une bibliothèque CSS prête à l’emploi.
Elle fournit :
- Une grille responsive
- Des composants prêts à l’emploi
- Des styles cohérents
2. Ajouter Bootstrap
Le plus simple est d’utiliser le CDN :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">À placer dans la balise <head>.
3. La grille Bootstrap
Bootstrap utilise un système de grille basé sur 12 colonnes.
<div class="container">
<div class="row">
<div class="col">Colonne 1</div>
<div class="col">Colonne 2</div>
</div>
</div>
Les colonnes s’adaptent automatiquement selon l’écran.
4. Exemple avec tailles
<div class="row">
<div class="col-md-6">50% sur écran moyen</div>
<div class="col-md-6">50% sur écran moyen</div>
</div>
Sur mobile, les blocs passent automatiquement en colonne.
5. Les composants
Bootstrap propose de nombreux composants prêts à l’emploi.
Exemple : bouton
<button class="btn btn-primary">Cliquez ici</button>Exemple : carte
<div class="card">
<div class="card-body">
Contenu
</div>
</div>
6. Les classes utilitaires
Bootstrap permet aussi de styliser rapidement :
<div class="text-center mt-3">Texte centré</div>- text-center : centrer le texte
- mt-3 : marge en haut
7. À retenir
- Bootstrap accélère le développement
- La grille permet de créer des layouts responsive
- Les composants sont prêts à l’emploi
- Les classes utilitaires simplifient le CSS
Conclusion
Vous pouvez maintenant créer des interfaces modernes rapidement.
Dans le prochain chapitre, nous allons introduire PHP pour rendre le site dynamique.
Navigation dans la série
Chapitre 5 : Adampter son site aux mobilesChapitre 7 : Introduction à PHP