Pourquoi Bootstrap 5 ?
Bootstrap 5 est le framework CSS le plus utilisé au monde. Il permet de créer des sites responsive (adaptés mobile/tablette/desktop) rapidement grâce à des classes CSS prêtes à l’emploi. Plus besoin de jQuery depuis la version 5.
Installation rapide (CDN)
Ajoutez ces 2 lignes dans votre HTML et c’est prêt :
<!-- Dans le <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Avant </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>Le système de grille : la base
Bootstrap divise l’écran en 12 colonnes. Vous combinez les colonnes pour créer vos mises en page :
<div class="container">
<div class="row">
<!-- 3 colonnes égales -->
<div class="col-md-4">Colonne 1</div>
<div class="col-md-4">Colonne 2</div>
<div class="col-md-4">Colonne 3</div>
</div>
<div class="row mt-4">
<!-- Sidebar + Contenu principal -->
<div class="col-md-3">Menu latéral</div>
<div class="col-md-9">Contenu principal</div>
</div>
</div>Les breakpoints (points de rupture)
| Classe | Taille écran | Appareil |
|---|---|---|
col- |
< 576px | Mobile portrait |
col-sm- |
≥ 576px | Mobile paysage |
col-md- |
≥ 768px | Tablette |
col-lg- |
≥ 992px | Laptop |
col-xl- |
≥ 1200px | Desktop |
<!-- Responsive : 1 colonne sur mobile, 2 sur tablette, 4 sur desktop -->
<div class="row">
<div class="col-12 col-md-6 col-lg-3">Carte 1</div>
<div class="col-12 col-md-6 col-lg-3">Carte 2</div>
<div class="col-12 col-md-6 col-lg-3">Carte 3</div>
<div class="col-12 col-md-6 col-lg-3">Carte 4</div>
</div>Composants essentiels
Navbar responsive
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">ITSkillsCenter</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="#">Formations</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>Cards (cartes)
<div class="card" style="width: 18rem;">
<img src="formation.jpg" class="card-img-top" alt="Formation">
<div class="card-body">
<h5 class="card-title">Formation JavaScript</h5>
<p class="card-text">Apprenez JS de zéro à expert en 30 jours.</p>
<a href="#" class="btn btn-primary">S'inscrire</a>
</div>
</div>Formulaire stylisé
<form>
<div class="mb-3">
<label class="form-label">Nom complet</label>
<input type="text" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Formation souhaitée</label>
<select class="form-select">
<option>Développement Web</option>
<option>Marketing Digital</option>
<option>Cybersécurité</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>Classes utilitaires les plus utilisées
| Classe | Effet |
|---|---|
mt-3, mb-4, px-2, py-5 |
Marges et padding (0 à 5) |
text-center, text-end |
Alignement du texte |
d-flex, justify-content-between |
Flexbox |
d-none d-md-block |
Cacher sur mobile, afficher sur tablette+ |
bg-primary, text-white |
Couleurs de fond et texte |
rounded, shadow |
Bordures arrondies et ombres |
Exercice pratique
🎯 Défi : Page d’accueil responsive avec Bootstrap 5
- Navbar responsive avec logo et 4 liens
- Hero section avec titre, texte et bouton CTA
- Section « Services » avec 3 cards en grille responsive
- Formulaire de contact avec validation Bootstrap
- Footer avec 3 colonnes responsive
- Tout doit être parfait sur mobile, tablette et desktop
