Le système de grille est le coeur de Bootstrap, qui considère qu’une ligne .row fait 12 colonnes. L’idée d’un responsive design est de dire que pour telle taille d’écran, un élément occupe X colonne(s).
Bootstrap prend en charge 4 types de format :
| Très petit format | < 768 pixels | ( Smartphone ) |
| Petit format | ≥ 786 px & < 992 px | ( Tablette ) |
| Moyen format | ≥ 992 px & < 1200 px | ( Petit écran ) |
| Large format | ≥ 1200 px | ( Ecran standard ) |
Il existe un préfixe pour ces formats :
| Très petit format | .col-xs- |
| Petit format | .col-sm- |
| Moyen format | .col-md- |
| Large format | .col-lg- |
Container
Les containers sont les éléments de présentation les plus élémentaires de Bootstrap et sont obligatoires pour l’utilisation du système de grille par défaut.
<div class="container">
<!-- Content here -->
</div>Utilisez ce paramètre .container-fluid pour un container de largeur complète, couvrant toute la largeur de la fenêtre.
<div class="container-fluid">
...
</div>Comment ça marche
Le système de grille de Bootstrap utilise une série de containers, de lignes et de colonnes pour mettre en forme et aligner le contenu. Il est construit avec flexbox et est entièrement réactif. Ci-dessous un exemple et un aperçu détaillé de la manière dont la grille est réalisée.
<div class="container">
<div class="row">
<div class="col-md-4">
One of three columns
</div>
<div class="col-md-4">
One of three columns
</div>
<div class="col-md-4">
One of three columns
</div>
</div>
</div>Classe Offset
La classe Offset permet de déplacer les colonnes vers la droite en utilisant des classes .offset-md-*. Ces classes augmentent la marge gauche d’une colonne de *colonnes. Par exemple, .offset-md-4 déplace .col-md-4sur quatre colonnes.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
</div>