Système de grille

Utilisez notre puissante grille flexbox mobile-first pour créer des mises en page de toutes formes et tailles grâce à un système à douze colonnes, cinq niveaux réactifs par défaut, des variables et mixins Sass et des dizaines de classes prédéfinies.

Comment ça fonctionne

Le système de grille de Bootstrap utilise une série de conteneurs, de lignes et de colonnes pour mettre en page et aligner le contenu. Il est construit avec flexbox et est entièrement réactif. Vous trouverez ci-dessous un exemple et un examen approfondi de la façon dont la grille se rassemble.

Nouveau ou peu familier avec flexbox ? Lisez ce guide CSS Tricks flexbox pour le contexte, la terminologie, les directives et les extraits de code.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

L'exemple ci-dessus crée trois colonnes de largeur égale sur des appareils petits, moyens, grands et très grands à l'aide de nos classes de grille prédéfinies. Ces colonnes sont centrées dans la page avec le parent .container.

En décomposant, voici comment cela fonctionne :

• Les conteneurs permettent de centrer et de remplir horizontalement le contenu de votre site. À utiliser .container pour une largeur de pixel réactive ou .container-fluid pour width: 100% toutes les tailles de fenêtres et d'appareils.
• Les lignes sont des wrappers pour les colonnes. Chaque colonne a une horizontale padding (appelée gouttière) pour contrôler l'espace entre elles. Ceci padding est ensuite contrecarré sur les lignes avec des marges négatives. De cette façon, tout le contenu de vos colonnes est aligné visuellement sur le côté gauche.
• Dans une disposition en grille, le contenu doit être placé dans des colonnes et seules les colonnes peuvent être des enfants immédiats des lignes.
• Grâce à flexbox, les colonnes de grille sans spécification width seront automatiquement disposées en colonnes de largeur égale. Par exemple, quatre instances de .col-sm auront chacune automatiquement une largeur de 25 % à partir du petit point d'arrêt et plus. Voir la section des colonnes de mise en page automatique pour plus d'exemples.
• Les classes de colonnes indiquent le nombre de colonnes que vous souhaitez utiliser sur les 12 possibles par ligne. Donc, si vous voulez trois colonnes de largeur égale, vous pouvez utiliser .col-4.
• Les colonnes width sont définies en pourcentages, elles sont donc toujours fluides et dimensionnées par rapport à leur élément parent. Les colonnes ont une horizontale padding pour créer les gouttières entre les colonnes individuelles, cependant, vous pouvez supprimer les margin lignes et les padding colonnes avec .no-gutters sur le .row.
• Pour rendre la grille réactive, il existe cinq points d'arrêt de grille, un pour chaque point d' arrêt réactif : tous les points d'arrêt (extra petit), petit, moyen, grand et très grand.
• Les points d'arrêt de la grille sont basés sur des requêtes multimédias de largeur minimale, ce qui signifie qu'ils s'appliquent à ce point d'arrêt et à tous ceux qui le précèdent (par exemple, .col-sm-4 s'appliquent aux appareils petits, moyens, grands et très grands, mais pas au premier point d' xs arrêt).
• Vous pouvez utiliser des classes de grille prédéfinies (comme .col-4) ou des mixins Sass pour un balisage plus sémantique.

Référence

La documentation Bootstrap reprend les informations du site bootstrap21.org accessible en français ci-dessous :

Accéder à la documentation Bootstrap du sytème de grille du site bootstrap21.org/fr