Mise en page

Grille

La grille organise la page en lignes et en douze colonnes, grâce à Flexbox. Elle s’adapte à la largeur de l’écran grâce aux classes responsives.

Le principe tient en quatre règles :

Les conteneurs (.container, .container-fluid) centrent et alignent le contenu.
Les lignes (.row) regroupent les colonnes et compensent leurs marges intérieures.
Les colonnes (.col-*) sont les enfants directs d’une ligne. Leur largeur se compte sur 12 : col-4 occupe un tiers de la ligne.
Si une ligne contient plus de 12 colonnes, l’excédent passe à la ligne suivante.

Seules les colonnes doivent être enfants directes d’une ligne ; placez le contenu dans les colonnes. Les gouttières (espaces entre colonnes) se règlent avec les classes g-*.

Colonnes de largeur égale#

Sans nombre, .col répartit l’espace disponible de façon égale entre toutes les colonnes de la ligne.

Épargne

Prêts

Cartes

<div class="container">
  <div class="row">
    <div class="col"><div class="bg-body-secondary border p-3">Épargne</div></div>
    <div class="col"><div class="bg-body-secondary border p-3">Prêts</div></div>
    <div class="col"><div class="bg-body-secondary border p-3">Cartes</div></div>
  </div>
</div>

Plusieurs paliers dans une même ligne#

Combinez les suffixes de point de rupture pour décrire la mise en page à chaque largeur. Ici : une colonne par ligne sur téléphone, deux dès sm, trois dès lg.

Virements

Mensualités

Agences

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-sm-6 col-lg-4"><div class="bg-body-secondary border p-3">Virements</div></div>
    <div class="col-12 col-sm-6 col-lg-4"><div class="bg-body-secondary border p-3">Mensualités</div></div>
    <div class="col-12 col-sm-12 col-lg-4"><div class="bg-body-secondary border p-3">Agences</div></div>
  </div>
</div>

Principale et latérale#

Une mise en page classique : un contenu principal de 8 colonnes et un panneau latéral de 4, qui passent l’un sous l’autre sur petit écran.

Relevé de compte

Solde : 1 250 000 FCFA

<div class="container">
  <div class="row g-3">
    <div class="col-md-8"><div class="bg-body-secondary border p-3">Relevé de compte</div></div>
    <div class="col-md-4"><div class="bg-body-secondary border p-3">Solde : 1 250 000 FCFA</div></div>
  </div>
</div>

Retour à la ligne automatique#

Les colonnes qui dépassent un total de 12 passent à la ligne. Ici, 4 + 4 + 6 : la troisième colonne descend.

6, sur la ligne suivante

<div class="container">
  <div class="row g-3">
    <div class="col-4"><div class="bg-body-secondary border p-3">4</div></div>
    <div class="col-4"><div class="bg-body-secondary border p-3">4</div></div>
    <div class="col-6"><div class="bg-body-secondary border p-3">6, sur la ligne suivante</div></div>
  </div>
</div>

Classes de la grille

Les suffixes de palier sont sm, md, lg, xl et xxl. Sans suffixe, la règle vaut dès le plus petit écran.

Classes de la grille
Classe	Effet
`.row`	Ligne flexible qui autorise le retour à la ligne et compense les marges des colonnes.
`.col`, `.col-{palier}`	Colonne qui prend l’espace restant, à parts égales.
`.col-1` à `.col-12`	Colonne de 1/12 à 12/12 de la ligne.
`.col-auto`	Colonne à la largeur de son contenu.
`.row-cols-1` à `.row-cols-6`, `.row-cols-auto`	Nombre de colonnes par ligne, défini sur la ligne.
`.offset-1` à `.offset-11`	Marge à gauche d’une colonne, en douzièmes.
`.order-0` à `.order-5`, `.order-first`, `.order-last`	Ordre d’affichage des colonnes.
`.g-`, `.gx-`, `.gy-*`	Gouttières horizontales et verticales (0 à 5).

Variables de la grille

Variables de la grille
Nom	Valeur par défaut	Rôle
`$grid-columns`	`12`	Nombre de colonnes de la grille.
`$grid-gutter-width`	`1.5rem`	Largeur de la gouttière par défaut.
`$grid-row-columns`	`6`	Nombre maximal de colonnes proposé par les classes `.row-cols-*`.
`$enable-grid-classes`	`true`	Génère les classes `.row` et `.col-*`. Passez à `false` si vous n’utilisez pas la grille.
`$grid-breakpoints`	voir Points de rupture	Paliers disponibles pour chaque classe.

Bonnes pratiques

À faire

Commencez par la version téléphone (col-12 ou aucune classe), puis ajoutez les paliers supérieurs.
Ajoutez les gouttières avec g-3 ou g-4 pour aérer le contenu.
Placez le contenu dans des éléments à l’intérieur des colonnes, jamais directement sur la colonne si vous voulez lui donner un fond.

À éviter

N’utilisez pas la grille pour de simples alignements dans un composant : Flex est plus direct.
Ne placez pas d’autre élément qu’une colonne directement dans une .row.

Accessibilité

L’ordre du code source détermine l’ordre de lecture et de tabulation : gardez-le logique, même si vous réorganisez visuellement avec order-*.