Mise en page

Colonnes

Les classes de colonnes règlent la largeur, la position, l’ordre et l’alignement des éléments d’une ligne. Toutes existent pour chaque point de rupture.

Colonnes automatiques et fixes#

Mélangez .col (qui se partage l’espace restant) avec des colonnes de largeur fixe : ici, la colonne centrale occupe 6/12 et les deux autres se partagent le reste.

Reste

col-6

Reste

<div class="container">
  <div class="row g-2">
    <div class="col"><div class="bg-body-secondary border p-3">Reste</div></div>
    <div class="col-6"><div class="bg-body-secondary border p-3">col-6</div></div>
    <div class="col"><div class="bg-body-secondary border p-3">Reste</div></div>
  </div>
</div>

Largeur selon le contenu#

.col-auto donne à la colonne la largeur de son contenu ; les colonnes .col prennent le reste.

Libellé du virement

25 000 FCFA

<div class="container">
  <div class="row g-2 align-items-center">
    <div class="col"><div class="bg-body-secondary border p-3">Libellé du virement</div></div>
    <div class="col-auto"><div class="bg-body-secondary border p-3">25 000 FCFA</div></div>
  </div>
</div>

Nombre de colonnes par ligne#

Définissez sur la .row combien de colonnes tiennent sur une ligne avec .row-cols-* : chaque enfant reçoit la même largeur sans classe individuelle. Les variantes par palier (row-cols-md-3) fonctionnent aussi, et row-cols-auto adapte chaque colonne à son contenu.

<div class="container">
  <div class="row row-cols-2 row-cols-md-4 g-2">
    <div class="col"><div class="bg-body-secondary border p-3">1</div></div>
    <div class="col"><div class="bg-body-secondary border p-3">2</div></div>
    <div class="col"><div class="bg-body-secondary border p-3">3</div></div>
    <div class="col"><div class="bg-body-secondary border p-3">4</div></div>
    <div class="col"><div class="bg-body-secondary border p-3">5</div></div>
    <div class="col"><div class="bg-body-secondary border p-3">6</div></div>
    <div class="col"><div class="bg-body-secondary border p-3">7</div></div>
    <div class="col"><div class="bg-body-secondary border p-3">8</div></div>
  </div>
</div>

Décalage avec les offsets#

.offset-* ajoute une marge à gauche, comptée en douzièmes de la ligne. Remettez-la à zéro à un palier avec .offset-{palier}-0. Pour pousser une colonne vers la droite, ms-auto convient aussi.

col-4

col-4 offset-4

col-md-3 offset-md-3

col-md-5 ms-auto

<div class="container">
  <div class="row g-2 mb-2">
    <div class="col-4"><div class="bg-body-secondary border p-3">col-4</div></div>
    <div class="col-4 offset-4"><div class="bg-body-secondary border p-3">col-4 offset-4</div></div>
  </div>
  <div class="row g-2 mb-2">
    <div class="col-md-3 offset-md-3"><div class="bg-body-secondary border p-3">col-md-3 offset-md-3</div></div>
    <div class="col-md-3 offset-md-3"><div class="bg-body-secondary border p-3">col-md-3 offset-md-3</div></div>
  </div>
  <div class="row g-2">
    <div class="col-6 col-md-5 ms-auto"><div class="bg-body-secondary border p-3">col-md-5 ms-auto</div></div>
  </div>
</div>

Ordre des colonnes#

Changez l’ordre d’affichage sans toucher au code : .order-first place la colonne en tête, .order-last en fin, et .order-0 à .order-5 fixent une position précise.

Premier dans le code, affiché en dernier

Sans ordre

Dernier dans le code, affiché en premier

Détail du prêt (second sur téléphone)

Simulateur (premier sur téléphone)

<div class="container">
  <div class="row g-2 mb-2">
    <div class="col order-last"><div class="bg-body-secondary border p-3">Premier dans le code, affiché en dernier</div></div>
    <div class="col"><div class="bg-body-secondary border p-3">Sans ordre</div></div>
    <div class="col order-first"><div class="bg-body-secondary border p-3">Dernier dans le code, affiché en premier</div></div>
  </div>
  <div class="row g-2">
    <div class="col-12 col-md-6 order-2 order-md-1"><div class="bg-body-secondary border p-3">Détail du prêt (second sur téléphone)</div></div>
    <div class="col-12 col-md-6 order-1 order-md-2"><div class="bg-body-secondary border p-3">Simulateur (premier sur téléphone)</div></div>
  </div>
</div>

Alignement vertical#

Alignez toutes les colonnes d’une ligne avec .align-items-start, -center ou -end sur la .row, ou une colonne seule avec .align-self-*.

Centrée

En haut

Au centre

En bas

<div class="container">
  <div class="row align-items-center g-2 bg-body-secondary border mb-2" style="min-height: 6rem;">
    <div class="col"><div class="border bg-body p-2">Centrée</div></div>
    <div class="col"><div class="border bg-body p-2">Centrée</div></div>
    <div class="col"><div class="border bg-body p-2">Centrée</div></div>
  </div>
  <div class="row g-2 bg-body-secondary border" style="min-height: 6rem;">
    <div class="col align-self-start"><div class="border bg-body p-2">En haut</div></div>
    <div class="col align-self-center"><div class="border bg-body p-2">Au centre</div></div>
    <div class="col align-self-end"><div class="border bg-body p-2">En bas</div></div>
  </div>
</div>

Alignement horizontal#

Quand les colonnes ne remplissent pas les 12 parts, répartissez l’espace avec .justify-content-* sur la ligne : start, center, end, around, between ou evenly.

Centré

between

end

<div class="container">
  <div class="row justify-content-center g-2 mb-2">
    <div class="col-4"><div class="bg-body-secondary border p-3">Centré</div></div>
    <div class="col-4"><div class="bg-body-secondary border p-3">Centré</div></div>
  </div>
  <div class="row justify-content-between g-2 mb-2">
    <div class="col-4"><div class="bg-body-secondary border p-3">between</div></div>
    <div class="col-4"><div class="bg-body-secondary border p-3">between</div></div>
  </div>
  <div class="row justify-content-end g-2">
    <div class="col-4"><div class="bg-body-secondary border p-3">end</div></div>
  </div>
</div>

Forcer un retour à la ligne#

Insérez un élément de pleine largeur (.w-100) entre deux colonnes pour couper la ligne à cet endroit, sans changer les largeurs.

<div class="container">
  <div class="row g-2">
    <div class="col-6 col-md"><div class="bg-body-secondary border p-3">A</div></div>
    <div class="col-6 col-md"><div class="bg-body-secondary border p-3">B</div></div>
    <div class="w-100"></div>
    <div class="col-6 col-md"><div class="bg-body-secondary border p-3">C</div></div>
    <div class="col-6 col-md"><div class="bg-body-secondary border p-3">D</div></div>
  </div>
</div>

Colonnes imbriquées#

Une colonne peut contenir sa propre .row. Les douze parts de la ligne imbriquée se comptent à partir de la largeur de la colonne parente.

Compte courant

Crédits

Débits

Plafonds

<div class="container">
  <div class="row g-2">
    <div class="col-md-8">
      <div class="bg-body-secondary border p-3">
        Compte courant
        <div class="row g-2 mt-1">
          <div class="col-6"><div class="bg-body border p-2">Crédits</div></div>
          <div class="col-6"><div class="bg-body border p-2">Débits</div></div>
        </div>
      </div>
    </div>
    <div class="col-md-4"><div class="bg-body-secondary border p-3">Plafonds</div></div>
  </div>
</div>

Classes de colonnes

Le suffixe de palier {palier} peut être sm, md, lg, xl ou xxl ; omettez-le pour appliquer la règle à toutes les largeurs.

Classes de colonnes
Classe	Valeurs	Effet
`.col`, `.col-{palier}`	—	Colonne flexible, largeur égale (`flex: 1 0 0`).
`.col-auto`, `.col-{palier}-auto`	—	Largeur du contenu.
`.col-{n}`, `.col-{palier}-{n}`	1 à 12	Largeur de n douzièmes (par exemple `col-3` = 25 %).
`.row-cols-{n}`, `.row-cols-{palier}-{n}`	1 à 6, `auto`	Nombre de colonnes par ligne, à poser sur la `.row`.
`.offset-{n}`, `.offset-{palier}-{n}`	0 à 11	Décalage à gauche de n douzièmes ; `0` existe uniquement avec un palier.
`.order-{n}`, `.order-{palier}-{n}`	0 à 5, `first`, `last`	Place d’affichage ; `first` = −1, `last` = 6.
`.align-items-*`	start, center, end, baseline, stretch	Alignement vertical de toutes les colonnes (sur la ligne).
`.align-self-*`	start, center, end, baseline, stretch, auto	Alignement vertical d’une colonne.
`.justify-content-*`	start, center, end, around, between, evenly	Alignement horizontal des colonnes (sur la ligne).

Bonnes pratiques

À faire

Donnez à chaque colonne une largeur de repli pour le téléphone (col-12) avant les paliers supérieurs.
Préférez row-cols-* aux listes de colonnes identiques : le code est plus court et plus lisible.
Utilisez order-* avec modération : un ordre visuel très différent de l’ordre du code déroute les utilisateurs de clavier.

À éviter

Ne dépassez pas 2 niveaux d’imbrication : la mise en page devient fragile.
N’appliquez pas .col-* hors d’une .row : les marges et largeurs ne seront pas celles attendues.

Accessibilité

Si vous réordonnez des colonnes de formulaire, vérifiez que l’ordre de tabulation reste cohérent avec l’ordre affiché.