Grille
Le contenu est centré dans un bj-container (largeur max. 1248 px) avec marges latérales responsives. La grille comporte 12 colonnes et des gouttières basées sur --bj-spacing-4v.
Points de rupture
| Nom | Largeur min. | Préfixe de colonne |
|---|---|---|
| SM | 576 px | bj-col-sm-* |
| MD | 768 px | bj-col-md-* |
| LG | 992 px | bj-col-lg-* |
| XL | 1248 px | bj-col-xl-* |
12 colonnes (démo)
Ligne classique avec marges négatives sur le rang - chaque colonne a un padding latéral.
1
2
3
4
5
6
7
8
9
10
11
12
Gouttières : bj-grid-row--gutters
Utilise la propriété gap ; les colonnes n’ont pas de padding supplémentaire à l’intérieur du rang.
bj-col-12 bj-col-md-4
bj-col-12 bj-col-md-4
bj-col-12 bj-col-md-4
<div class="bj-grid-row bj-grid-row--gutters">
<div class="bj-col-12 bj-col-md-6 bj-col-lg-4">…</div>
</div>Colonnes responsives
Combinez bj-col-* avec bj-col-sm-*, bj-col-md-*, bj-col-lg-*, bj-col-xl-*. Utilisez bj-col pour une colonne flexible (flex: 1 1 0%).