Content Grids Components Javascript / Jquery

La Grille

Le système de grille



La Grille Alignement Flexbox Marge, Wrap et Ordre


Grille basique responsive

  • 6 colonnes avec petits écrans | 576px - 768px |
  • 8 colonnes Medium | 768px - 992px |
  • 9 colonnes grands écrans | 992px - 1200px |
  • 10 colonnes écran extra larges > 1200px
  • 6 colonnes small
  • 4 colonnes medium
  • 3 colonnes large
  • 2 colonnes xlarge



Largeurs égales

largeur égale
largeur égale
largeur égale
largeur égale



Colonnes automatiques

Auto Layout
Auto Layout
Auto Layout



Largeurs égales puis se stackent en small

largeur égale puis stack
largeur égale puis stack
largeur égale puis stack



Mettons de l'odre

Premier
Second
Troisième



Décalage

.col-md-6 .offset-md-3
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3



Les unes dans les autres

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6