Skip to Content
BootstrapPartie 2 — Mise en page : grille & layout2.6 — Columns CSS, z-index & position

2.6 — Columns CSS, z-index & position

⏱️ TL;DR — Trois briques de layout complémentaires à la grille : les CSS columns (.columns, style « journal » multi-colonnes pour du texte), les utilitaires de position (position-*, top-0, translate-middle, sticky-top, fixed-top) et le z-index (z-* en 5.3) pour gérer la superposition.

🎯 Objectifs

  • Créer une mise en colonnes typographique.
  • Positionner un élément (fixe, collant, absolu) et le placer.
  • Contrôler l’empilement avec le z-index.

Position

<div class="position-relative">
  <div class="position-absolute top-0 start-0">En haut à gauche</div>
  <div class="position-absolute top-50 start-50 translate-middle">Centré pile</div>
  <div class="position-absolute bottom-0 end-0">En bas à droite</div>
</div>
  • position-static | relative | absolute | fixed | sticky.
  • Placement : top-0 | top-50 | top-100, idem bottom, start, end.
  • translate-middle décale de -50 %/-50 % pour un centrage exact.

Barres collantes / fixes bien utiles :

<header class="sticky-top bg-white">Reste en haut au scroll</header>
<footer class="fixed-bottom">Toujours visible en bas</footer>
  • fixed-top, fixed-bottom, sticky-top, sticky-bottom.

Le pattern « badge sur un coin »

<button class="btn btn-primary position-relative">
  Messages
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    9+
  </span>
</button>

top-0 start-100 translate-middle = ancré au coin supérieur droit, centré sur ce coin.

Z-index (nouveau en 5.3)

<div class="position-relative z-3">Au-dessus</div>
<div class="position-relative z-0">En dessous</div>

Classes z-n1, z-0, z-1, z-2, z-3. Bootstrap réserve aussi des z-index élevés pour ses composants (modale, dropdown…) via des variables Sass — évitez de les concurrencer avec des valeurs arbitraires énormes.

CSS columns (multi-colonnes typographiques)

Pour un texte long façon journal (à ne pas confondre avec la grille) :

<div style="columns: 3; column-gap: 2rem;">
  <p>Long texte qui se répartit automatiquement en 3 colonnes…</p>
</div>

Bootstrap ne fournit pas de classe dédiée pour ça — on utilise le CSS natif columns. À réserver au contenu éditorial.

⚠️ Piège — Utiliser un z-index: 9999 maison pour passer au-dessus d’une modale : la modale de Bootstrap gère son propre empilement (backdrop + dialog). Mieux vaut composer avec ses composants qu’écraser leur z-index.

💡 Pour un dev React — sticky-top sur un header est le réflexe pour une topbar de dashboard. Attention en Next.js : si un parent a overflow: hidden, position: sticky ne fonctionne pas — c’est du CSS standard, pas un bug Bootstrap.

✏️ Exercices

  1. Placez un badge « Nouveau » en haut à droite d’une carte.

✅ Solution

<div class="card position-relative">
  <span class="position-absolute top-0 end-0 m-2 badge bg-success">Nouveau</span>
  …
</div>
  1. Faites une barre de navigation qui reste collée en haut pendant le scroll.

✅ Solution

Ajoutez sticky-top (et un fond opaque) sur l’élément <header> / <nav>.

🧠 Quiz de révision

1. Quelle classe pour un header qui reste en haut au scroll ?

sticky-top.

2. Que fait translate-middle ?

Décale l’élément de -50 % en X et Y, pour un centrage exact sur son point d’ancrage.

3. Quelles classes de z-index Bootstrap 5.3 ajoute-t-il ?

z-n1, z-0, z-1, z-2, z-3.

4. position-absolute nécessite quoi sur le parent pour être relatif à lui ?

Un parent en position-relative (ou tout contexte de positionnement).

5. Bootstrap a-t-il une classe pour les colonnes typographiques ?

Non — on utilise le CSS natif columns.

🎉 Fin de la Partie 2 ! Partie suivante : Partie 3 — Contenu & typographie

2.5 — Les utilitaires FlexVue d'ensemble