Menu
Exemple: Grille Mobile, Tablet, Desktop
Exemple: Wrapping des colonnes
Décallage des colonnes (offset)
Ordre des colonnes (push-pull)
Reset des colonnes (column clearing, et offset/push/pull reset)
Options de la grille
| Extra small devices Phones (<768px) |
Small devices Tablets (≥768px) |
Medium devices Desktops (≥992px) |
|
|---|---|---|---|
| Comportement de la grille | Tout le temps horizontal | Empillé au départ, horizontal au-delà des breakpoints | |
| Largeur du container | Aucune (auto) | 750px | 970px |
| Préfixe de class | .col-xs- |
.col-sm- |
.col-md- |
| # of columns | 12 | ||
| Largeur de la colonne | Auto | ~62px | ~81px |
| Largeur de la goutière | 30px (15px de chaque coté de la colonne) | ||
| Nestable | Yes | ||
| Offsets | Yes | ||
| Column ordering | Yes | ||
Exemple : Grille Desktop
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
.col-md-8
.col-md-4
Exemple: Grille Mobile, Tablet, Desktop
(.col-xs-12 inutile car valeur par défaut) .col-sm-6 .col-md-8
.col-xs-6 (.col-sm-6 inutile si même comportement que xs) .col-md-4
.col-xs-6 .col-sm-4 (.col-md-4 inutile si même comportement que sm)
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Exemple: Wrapping des colonnes
.col-xs-9
.col-xs-4
Comm 9 + 4 = 13 > 12, Cette division de 4 colonnes est décalée sur une nouvelle ligne en tant qu'unité contiguë.
Comm 9 + 4 = 13 > 12, Cette division de 4 colonnes est décalée sur une nouvelle ligne en tant qu'unité contiguë.
.col-xs-6
Les colonnes subséquentes continuent le long de la nouvelle ligne.
Les colonnes subséquentes continuent le long de la nouvelle ligne.
Décallage des colonnes (offset)
.col-md-4
.col-md-offset-4
.col-md-4
.col-md-offset-3 .col-md-3
.col-md-offset-3 .col-md-3
.col-md-offset-3 .col-md-6
Ordre des colonnes (push-pull)
.col-md-push-3 .col-md-9
.col-md-pull-9 .col-md-3
Colonnes encapsulées (nested)
niv1 .col-md-8
niv2 .col-xs-8 .col-sm-6
niv2 .col-xs-4 .col-sm-6
niv1 .col-md-4
Reset des colonnes (column clearing, et offset/push/pull reset)
.col-xs-6 .col-sm-3
Hauteur de colonne trop grand par rapport à la hauteur des colonnes suivantes.
Redimenssionnez l'écran, ou regardez-le sur votre smartphone pour voir l'exemple.
Hauteur de colonne trop grand par rapport à la hauteur des colonnes suivantes.
Redimenssionnez l'écran, ou regardez-le sur votre smartphone pour voir l'exemple.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3 (sans reset)
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
Redimenssionnez l'écran, ou regardez-le sur votre smartphone pour voir l'exemple.
Redimenssionnez l'écran, ou regardez-le sur votre smartphone pour voir l'exemple.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3 (avec colonne reset)
.col-xs-6 .col-sm-3
.col-sm-5 .col-md-6
.col-sm-offset-2 .col-sm-5 .col-md-6 (sans offset reset)
.col-sm-5 .col-md-6
.col-sm-offset-2 .col-sm-5 .col-md-offset-0 .col-md-6 (avec offset reset)
Utilitaires Responsive
| Extra small devices Phones (<768px) |
Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | |
|---|---|---|---|
.visible-xs-* |
Visible | Hidden | Hidden |
.visible-sm-* |
Hidden | Visible | Hidden |
.visible-md-* |
Hidden | Hidden | Visible |
.visible-lg-* |
Hidden | Hidden | Hidden |
.hidden-xs |
Hidden | Visible | Visible |
.hidden-sm |
Visible | Hidden | Visible |
.hidden-md |
Visible | Visible | Hidden |
.hidden-lg |
Visible | Visible | Visible |
| Group of classes | CSS display |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Cas de test
Visible on...
Extra small
✔ Visible on x-small
Small
✔ Visible on small
Medium
✔ Visible on medium
✔ Visible on x-small and small
✔ Visible on small and medium
✔ Visible on x-small and medium
✔ Visible on x-small and medium