Certains layout demandent d'imbriquer des colonnes. Une colonne va contenir d'autres colonnes.

Par exemple:

Pour cela, on ajoute simplement une rangée (row) à l'intérieur d'une colonne (col).

Par exemple, un layout sans imbrication:

<div class="container">
  <div class="row">
    <div class="col-4">
      Colonne 1
    </div>
    <div class="col-8">
      Colonne 2
    </div>
  </div>
</div>

Et avec des sous-colonnes à l'intérieur de Colonne 2:

<div class="container">
  <div class="row">
    <div class="col-4">
      Colonne 1
    </div>
    <div class="col-8">
      Colonne 2
      <div class="row">
        <div class="col-4">Sous-colonne 1</div>
        <div class="col-4">Sous-colonne 2</div>
        <div class="col-4">Sous-colonne 3</div>
      </div>
    </div>
  </div>
</div>

<aside> ⚠️ Pour les colonnes imbriquées, le calcul de la largeur se fait par rapport à la colonne parente. Par exemple col-6 fera 50% de la largeur de son parent, et non pas de la largeur du contenu.

</aside>

<aside> ⬅️ Order - modifier l’ordre des colonnes

</aside>

<aside> ➡️ Background en pleine largeur

</aside>