Mettre en forme la typographie et les liens, présenter des tableaux lisibles, construire des formulaires propres et des boutons, et utiliser les classes utilitaires d'espacement et de couleur.
Un centre de formation à Oujda publie le planning de ses cours et un formulaire d'inscription. En HTML brut, le tableau est collé, le formulaire est mal aligné et le bouton ressemble à celui de Windows 98. Avec quelques classes Bootstrap, le même HTML devient net et professionnel, sans écrire une ligne de CSS.
Un <button> sans classe : le style par défaut du navigateur, petit et gris.
Bootstrap s’utilise en ajoutant des classes aux balises. Pas besoin d’écrire de CSS pour les cas courants.
| Classe | Effet |
|---|---|
display-4, h1 à h6 | grands titres, taille d’un titre sans changer la balise |
lead | paragraphe d’introduction mis en valeur |
text-center, text-end | alignement |
fw-bold, fst-italic | gras, italique |
text-primary, text-danger, text-muted | couleur du texte |
link-primary, text-decoration-none | liens colorés, sans soulignement |
primary (bleu) · secondary (gris) · success (vert) · danger (rouge) · warning (jaune) · info · light · dark. Elles se combinent avec presque tout : text-, bg-, btn-, alert-, border-.
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered">...</table>
</div>
<div class="mb-3">
<label for="mail" class="form-label">E-mail</label>
<input type="email" id="mail" class="form-control">
<div class="form-text">Nous ne partageons jamais votre e-mail.</div>
</div>
<select class="form-select">...</select>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="ok">
<label class="form-check-label" for="ok">J'accepte</label>
</div>
btn + une couleur : btn btn-primary, btn btn-outline-danger. Tailles : btn-sm, btn-lg. La classe btn marche aussi sur un lien <a>.
{propriété}{côté}-{taille} : m (margin) ou p (padding) ; t, b, s (début), e (fin), x, y ou rien (tous) ; de 0 à 5, ou auto. Exemples : mb-3, px-4, mx-auto, p-0.
Une étiquette « taille M, coton, bleu » décrit le vêtement. Les classes Bootstrap sont des étiquettes qu'on colle sur les balises : « bouton, couleur principale, grande taille ».
<button class="btn btn-primary btn-lg">S'inscrire</button>
m = margin, p = padding ; t, b, s, e, x, y = haut, bas, début, fin, horizontal, vertical ; de 0 à 5 pour la taille. mt-3 : une marge en haut de taille 3.
<p class="mt-3 mb-0 px-2 text-center text-danger fw-bold">...</p>
Associez chaque situation à une couleur Bootstrap (primary, success, danger, warning, secondary) : (1) le bouton « Supprimer » ; (2) le bouton « Annuler » ; (3) un message « Inscription réussie » ; (4) le bouton principal « Valider ».
1. btn-danger (action dangereuse, en rouge) 2. btn-secondary (action secondaire, en gris) 3. text-success ou alert-success (en vert) 4. btn-primary
Placez les champs Nom et Prénom côte à côte sur ordinateur, l'un sous l'autre sur téléphone.
<div class="row g-3"> <div class="col-md-6"> <label for="nom" class="form-label">Nom</label> <input id="nom" class="form-control"> </div> <div class="col-md-6"> <label for="prenom" class="form-label">Prénom</label> <input id="prenom" class="form-control"> </div> </div>
Le planning a 8 colonnes et déborde sur téléphone. Quelle classe Bootstrap permet de le faire défiler horizontalement sans casser la page ?
<div class="table-responsive"> <table class="table">...</table> </div>