Le container Bootstrap définit une largeur pour le contenu. Il arrive cependant fréquemment qu'une couleur ou une image de fond couvre toute la largeur de l'écran.

Pour cela, on utilise plusieurs containers. Chaque container est entouré par une balise HTML qui servira à afficher un fond sur toute la largeur de l'écran.

Par exemple:

<header class="page-header">
  <div class="container">
    <div class="row">
      <div class="col-6">col-6</div>
      <div class="col-6">col-6</div>
    </div>
  </div>
</header>
<main class="page-content">
  <div class="container">
    <div class="row">
      <div class="col-6">col-6</div>
      <div class="col-6">col-6</div>
    </div> 
    <div class="row">
      <div class="col-6">col-6</div>
      <div class="col-6">col-6</div>
    </div>
  </div>
</main>
<footer class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col-6">col-6</div>
      <div class="col-6">col-6</div>
    </div>
  </div>
</footer>

.page-header {
  background: #226F54;
}

.page-content {
  background: #87C38F;
}

.page-footer {
  background: #43291F;
}

Affichera:

<aside> ⬅️ Nesting - imbriquer des colonnes

</aside>