Skip to Content
BootstrapPartie 2 — Mise en page : grille & layout2.3 — Colonnes avancées (offset, order, align)

2.3 — Colonnes avancées (offset, order, align)

⏱️ TL;DR — Trois leviers pour aller au-delà de la simple largeur : offset (offset-md-2) pour décaler une colonne, order (order-1, order-last) pour réordonner visuellement, et l’alignement (align-items-*, align-self-*, justify-content-*) hérité de Flexbox pour placer les colonnes dans la row.

🎯 Objectifs

  • Décaler des colonnes avec offset.
  • Réordonner des colonnes indépendamment du HTML.
  • Aligner verticalement et horizontalement.

Offset : décaler une colonne

<div class="row">
  <div class="col-md-4">A</div>
  <!-- saute 4 colonnes avant B -->
  <div class="col-md-4 offset-md-4">B</div>
</div>

offset-md-4 pousse la colonne de 4/12 vers la droite à partir de md. Pratique pour centrer une colonne unique : col-md-6 offset-md-3.

Alternative moderne : les utilitaires de marge (me-auto, ms-auto) ou justify-content-* remplacent souvent les offsets, avec plus de souplesse.

Order : réordonner sans toucher au HTML

<div class="row">
  <div class="col order-2">Premier dans le HTML, affiché 2e</div>
  <div class="col order-1">Second dans le HTML, affiché 1er</div>
</div>

Classes utiles : order-1 … order-5, order-first (= -1), order-last (= 6), et les variantes responsives order-md-*.

Cas classique : sur mobile, montrer l’image avant le texte, mais l’inverse sur desktop :

<div class="row">
  <div class="col-md-6 order-1 order-md-2">Image</div>
  <div class="col-md-6 order-2 order-md-1">Texte</div>
</div>

⚠️ Piège — order change l’ordre visuel, pas l’ordre du DOM. Pour l’accessibilité et le clavier, l’ordre de lecture reste celui du HTML. À utiliser avec discernement.

Alignement vertical

Sur la row (toutes les colonnes) ou sur une col (self) :

<!-- toutes les colonnes centrées verticalement -->
<div class="row align-items-center" style="height: 150px">
  <div class="col">…</div>
  <div class="col align-self-end">Celle-ci en bas</div>
</div>
  • align-items-start | center | end sur la row.
  • align-self-start | center | end sur une colonne.

Alignement horizontal

Quand les colonnes ne remplissent pas les 12 :

<div class="row justify-content-center">
  <div class="col-4">…</div>
  <div class="col-4">…</div>
</div>

justify-content-start | center | end | between | around | evenly.

💡 Pour un dev React — Ces classes sont exactement les propriétés Flexbox (align-items, justify-content, order) que vous connaissez, exposées en classes. Si vous maîtrisez Flexbox, vous maîtrisez déjà l’alignement de la grille Bootstrap.

✏️ Exercices

  1. Centrez une unique colonne de 6/12 dans sa row, de deux façons.

✅ Solution

Offset : col-6 offset-3. Ou flex : <div class="row justify-content-center"><div class="col-6">…</div></div>.

  1. Sur mobile, le formulaire doit apparaître avant l’illustration ; sur desktop, après. Comment ?

✅ Solution

order-1 order-md-2 sur le formulaire et order-2 order-md-1 sur l’illustration.

🧠 Quiz de révision

1. Que fait offset-md-3 ?

Décale la colonne de 3/12 vers la droite à partir de md.

2. order-first équivaut à quelle valeur ?

order: -1 (placé en premier).

3. Sur quel élément mettre align-items-center ?

Sur la row (aligne toutes les colonnes verticalement).

4. align-self-end s’applique à quoi ?

À une seule colonne, pour l’aligner en bas.

5. order change-t-il l’ordre du DOM ?

Non, seulement l’ordre visuel — l’ordre de lecture/clavier reste celui du HTML.

Chapitre suivant : 2.4 — Les gouttières (gutters)

2.2 — La grille en 12 colonnes2.4 — Les gouttières (gutters)