Aborder le responsive - l'élément "conteneur"


Pour utiliser le système de grille et permettre au responsive d'adapter le contenu, il faut d'abord utiliser un élément qui encadre le contenu, une sorte de "conteneur". Le responsive met à disposition deux éléments conteneurs :
<div class="container">
  ...
</div>

Ce conteneur a une largeur "fixe" en rapport à la taille de l'écran

 

<div class="container-fluid">
  ...
</div>

Ce conteneur a une largeur qui correspond toujours à la taille maximale de l'écran

 

Noter : les éléments conteneurs ne peuvent pas être emboités, mais vous pouvez utiliser plusieurs éléments dans la même page. Vous pouvez également alterner entre éléments "fixes" et "fluides" dans le même document.