Il est temps maintenant de créer des grilles Bootstrap 5 plus complexes grâce à l’imbrication (nesting) des colonnes.
Imbriquer des colonnes signifie que l’on place des colonnes à l’intérieur d’autres colonnes.
Pour notre exemple nous allons voir comment faire une maquette de style blog, avec un article à gauche et une barre latérale à droite.
Pour commencer, créons deux colonnes avec un point de transition de 768px (.md) à l’intérieur d’une rangée.
La première va avoir un espace de 8 colonnes et la deuxième de 4 colonnes.
Comment imbriquer des colonnes dans une autre colonne ?
Pour imbriquer des colonnes à l’intérieur d’une colonne nous allons d’abord de voir y imbriquer une rangée. L’imbrication de colonnes à l’intérieur d’autre colonne se fait en deux étapes.
La première étape consiste à imbriquer une rangée à l’intérieur de la colonne qui va contenir les autres colonnes.
<div class=”col>
<div class=”row“></div>
</div>
La seconde étape consiste à placer les colonnes à l’intérieur de la rangée imbriquée que l’on vient de créer.
<div class=”col>
<div class=”row“>
<div class=”col></div>
<div class=”col></div>
</div>
</div>
Point très important :
La largeur des colonnes n’a plus pour référence le conteneur (container) mais la colonne dans laquelle elles sont imbriquées.
Pour bien comprendre, imbriquons 2 colonnes de 6 colonnes de largeur dans la colonne article.
L’imbrication peut se faire sur plusieurs niveaux. On peut imbriquer des colonnes dans des colonnes imbriquées.
Par exemple, créons 2 colonnes de 6 colonnes de large à l’intérieur de la colonne imbriquée numéro 1.
Créer des Breakpoints différents selon l’imbrication des colonnes
Dans l’exemple ci-dessus toutes nos colonnes possèdent un breakpoint (point de transition de 768px), instauré avec la classe .md.
Ce qui signifie qu’en dessous de ce point les colonnes vont remplir toute la largeur de la page et donc se placer les unes en dessous des autres.
Comment faire si nous souhaitons par exemple que la barre latérale continue de se positionner à côté de la colonne article pour des tailles d’écran en dessous de 768px ?
C’est très simple, nous allons donner un breakpoint différent a la colonne barre latérale et à la colonne article.
Par exemple, le breakpoint .sm qui maintiendra les deux colonnes cote à cote jusqu’à la taille de l’écran passe en dessous des 576px.
Si l’on veut que la disposition persiste peu importe la taille de l’écran on n’utilise la classe .col sans instaurer de breakpoint.
