Le système de grille de Bootstrap¶
Système de grille¶
L'une des fonctionnalités les plus prisées de Bootstrap est son système de grille.
Le système de grille de Bootstrap permet d'afficher du contenu sur une page en utilisant une grille de 12 colonnes de large.
Avec Bootstrap, la grille est construite avec un flexbox, assurant ainsi la possibilité d'un affichage réactif.
Les étapes sont :
- déclarer une ou plusieurs lignes à l'aide de la classe row (déjà flex par défaut)
- ajouter des colonnes dans la ligne avec l'une des variantes de la classe col
Exemples de base¶
La classe col divise les 12 colonnes de base par le nombre de colonnes demandé :
Créer une ligne de deux colonnes d'égale largeur.
<div class="row">
<div class="col">colonne 1, 50% de largeur</div>
<div class="col">colonne 2, 50% de largeur</div>
</div>
Important : la classe col s'applique sur toutes les tailles d'écran si aucun breakpoint n'est donné.
Créer une ligne de deux colonnes de largeurs différentes -> remarquez qu'en additionnant la largeur de chaque colonne, on obtient un total de 12.
<div class="row">
<div class="col-2">2 / 12 colonnes</div>
<div class="col-10">10 / 12 colonnes</div>
</div>
Parce qu'aucun breakpoint n'est donné dans l'exemple ci-haut, les tailles de colonnes vont s'appliquer sur toutes les tailles d'écran.
Grilles réactives¶
Pour créer des grilles réactives: indiquer à partir de quelle taille d'écran la grille s'affiche sur une ligne.
Cela s'effectue avec les classes suivantes :
Exemple réactif :
<!-- Par défaut en colonne, puis en ligne sur petits écrans et plus avec taille de colonne indiquée -->
<div class="row">
<div class="col-sm-2">2 / 12 colonnes</div>
<div class="col-sm-8">8 / 12 colonnes</div>
<div class="col-sm-2">2 / 12 colonnes</div>
</div>
On peut aussi indiquer la taille des cellules pour chaque taille d'écran :
<!-- On indique une largeur de colonne pour différentes tailles d'écran. Si une colonne n'a pas de taille pour une largeur d'écran donnée, elle prendra l'espace qui reste. S'il manque d'espace pour une colonne, elle sera renvoyée à la ligne suivante. -->
<div class="row">
<div class="col-12 col-sm-6 col-md-3">Pleine largeur sur mobile, 6/12 sur petits écrans, 3/12 sur écrans moyens et plus </div>
<div class="col-12 col-sm-6 col-md-9 col-lg-3">Pleine largeur sur mobile, 6/12 sur petits écrans, 9/12 sur écrans moyens, 3/12 sur écrans larges et plus</div>
<div class="col-12 col-sm-6 col-lg-3">Pleine largeur sur mobile, 6/12 sur petits écrans jusqu'à 3/12 sur écrans larges et plus</div>
<div class="col-12 col-sm-6 col-lg-3">Pleine largeur sur mobile, 6/12 sur petits écrans jusqu'à 3/12 sur écrans larges et plus</div>
</div>
Pour plusieurs exemples et d'autres possibilités avec le système de grille :
