Conteneurs, flexbox et grilles

Bootstrap utilise un système de « grille » à 12 colonnes de base reposant sur le modèle des boites
flexibles (flexbox) comme système de disposition principal.
bien que le terme « grid » (grille) soit utilisé de nombreuses fois dans la documentation
officielle, le modèle utilisé par Bootstrap est bien le flexbox et non pas le modèle des grilles
CSS.
Le flexbox est ici utilisé par Bootstrap pour créer une sorte de grille mais nous n’allons pouvoir
manipuler que les propriétés liées au flexbox (dépendant de display : flex) et non pas celles
liées aux grilles (dépendant de display : grid).

Notez que lorsqu’on utilise Bootstrap il est toujours conseillé de définir un élément conteneur
avec class="container" ou class="container-fluid" qui servira de conteneur
générique et dans lequel on placera tout le contenu HTML de notre body. Cette bonne
pratique s’applique même lorsqu’on n’utilise pas le système de grilles Bootstrap ensuite.
La classe .container va permettre de définir un conteneur adaptable ou « responsive »

Un conteneur défini avec .container-fluid occupera toujours 100% de la largeur disponible.

Les règles liées aux grilles Bootstrap à retenir sont donc les suivantes :
• Les lignes (.row) doivent être placées dans des conteneurs (.container ou
.container-fluid) ;
• Les lignes ne doivent être utilisées que pour contenir des colonnes et, de façon réciproque,
les éléments disposés avec des classes .col doivent absolument être des enfants directs des
éléments portant des classes .row.

Explication des règles de structure des grilles Bootstrap à

partir de la définition des classes .row et .col
Je dois donc vous rappeler ici qu’une grille (et donc une ligne) Bootstrap contient toujours
automatiquement 12 colonnes qui sont implicites. On va ensuite pouvoir grouper ces colonnes
de base entre elles avec les classes .col-* et ainsi faire en sorte qu’une ligne possède 1, 2, 3,
4, 5, etc. colonnes personnalisées.
Chaque colonne personnalisée créée avec .col va par défaut posséder un padding gauche et
droit qu’on appelle également des « gouttières » et qui sert à espacer les contenus des
différentes colonnes créées.
La taille par défaut de ces gouttières est de 15px pour chaque côté. Ce padding est
contrebalancé par une margin négative sur l’élément portant la classe .row (l’élément
représentant la ligne) pour harmoniser l’alignement général entre les différents éléments.
On va pouvoir supprimer le padding des colonnes .col et la margin des éléments .row en
appliquant la classe .no-gutters à l’élément représentant la ligne.