7.4 — Bordures, ombres & divers

⏱️ TL;DR — border (+ border-top, border-0, border-primary, border-2) gère les bordures. rounded (+ rounded-circle, rounded-pill, rounded-3) les coins. shadow (+ -sm, -lg, -none) les ombres. Plus un tas de petits utilitaires : text-truncate, user-select-*, pe-none, align-*, float-*, object-fit-*.

🎯 Objectifs

• Ajouter et retirer des bordures ciblées.
• Arrondir les coins.
• Poser des ombres et gérer divers réglages.

Bordures

<div class="border">bordure sur les 4 côtés</div>
<div class="border-top border-bottom">haut et bas</div>
<div class="border border-primary">bordure colorée</div>
<div class="border border-3">épaisseur 3</div>
<div class="border-0">aucune bordure</div>

Côtés : border-top/end/bottom/start, retrait border-*-0. Couleur : border-{couleur}, border-{couleur}-subtle. Épaisseur : border-1…border-5. Opacité : border-opacity-*.

Coins arrondis

<div class="rounded">arrondi standard</div>
<div class="rounded-3">plus arrondi</div>
<div class="rounded-circle">cercle</div>
<div class="rounded-pill">pilule</div>
<div class="rounded-top rounded-end">seulement certains coins</div>
<div class="rounded-0">aucun arrondi</div>

Ombres

<div class="shadow-sm">ombre légère</div>
<div class="shadow">ombre standard</div>
<div class="shadow-lg">ombre marquée</div>
<div class="shadow-none">aucune ombre</div>

object-fit (images/vidéos)

<img class="object-fit-cover rounded" style="width:100px;height:100px" src="…" alt="…">

object-fit-cover/contain/fill/scale/none — pratique pour recadrer une image dans un carré (avatars, vignettes).

Divers utiles

<span class="user-select-all">tout sélectionné au clic</span>
<div class="pe-none">ignore les événements souris (pointer-events)</div>
<span class="align-middle">alignement vertical</span>
<img class="float-end">flottant à droite</img>
<div class="clearfix"></div>

⚠️ Piège — Empiler des ombres (shadow sur des éléments imbriqués) alourdit visuellement et nuit à la perf de rendu sur mobile. Une ombre par « niveau » de carte suffit.

💡 Pour un dev React — object-fit-cover sur des images de tailles variées garantit une grille de vignettes homogène sans recadrer les fichiers. Combiné à un ratio fixe (ratio ratio-1x1), c’est le duo parfait pour une galerie.

✏️ Exercices

1. Une vignette carrée qui recadre n’importe quelle image sans la déformer.

2. Une carte avec une ombre douce et des coins bien arrondis.

🧠 Quiz de révision

Chapitre suivant : 7.5 — L’Utility API