Introduction à Bootstrap 5
Bootstrap est un framework CSS open source développé par Twitter, devenu aujourd'hui l'un des outils les plus populaires pour créer des interfaces web responsives et modernes.
Pourquoi Bootstrap ?
Avant Bootstrap, chaque développeur réinventait la roue : grilles CSS maison, boutons stylisés à la main, menus déroulants codés from scratch. Bootstrap standardise tout cela en fournissant une bibliothèque de composants prêts à l'emploi.
Avantages principaux :
• Responsive par défaut — s'adapte à tous les écrans (mobile, tablette, desktop)
• Composants prêts à l'emploi — boutons, cartes, modales, alertes, navbars...
• Grille flexbox — système de 12 colonnes très puissant
• Personnalisable — variables CSS et utilitaires configurables
• Communauté immense — documentation complète, nombreux thèmes
Installation
La façon la plus simple est via CDN, sans rien installer :
Le système de grille
Bootstrap divise chaque ligne en 12 colonnes. On combine les classes col-* pour définir la largeur selon la taille d'écran :
Préfixes de breakpoints :
• col- : tous les écrans
• col-sm- : >= 576px
• col-md- : >= 768px
• col-lg- : >= 992px
• col-xl- : >= 1200px
Composants essentiels
Cartes (cards) :
Navbar responsive :
Boutons :
Utilitaires CSS
Bootstrap 5 propose des classes utilitaires très pratiques :
Marges et paddings :
• m-3, mt-2, mb-4, mx-auto, py-5...
• (m = margin, p = padding, t/b/s/e/x/y = top/bottom/start/end/axes)
Flexbox :
• d-flex, justify-content-between, align-items-center, flex-column...
Texte :
• text-center, text-muted, fw-bold, fs-5, fst-italic...
Couleurs :
• text-primary, text-danger, bg-light, bg-dark...
Bootstrap Icons
Bootstrap Icons est une bibliothèque d'icônes SVG complémentaire :
Utilisation :
icône maison
icône enveloppe
icône radio
Ce blog utilise Bootstrap 5
Ce blog est lui-même construit avec Bootstrap 5.3.3 + Bootstrap Icons 1.11.3 :
• Sidebar fixe responsive (280px sur desktop, slide-in sur mobile)
• Cartes pour les articles
• Grille pour les catégories
• Section admin conditionnelle (staff uniquement)
Bootstrap permet de construire rapidement des interfaces soignées sans partir de zéro, tout en restant entièrement personnalisable via des variables CSS et des classes utilitaires.
73 de F4HXN