L'intérêt principal d'une grille est de réaliser une mise en page. Maintenant que vous savez comment utiliser la grille de Bootstrap nous allons voir dans ce chapitre quelques exemples pour structurer correctement une page.

Mise en page simple

Commençons par quelque chose de simple avec une en-tête, un menu à gauche, une section à droite et un pied de page :

<div class="container">
  <header class="row">
    <div class="col">
      Entete
    </div>
  </header>
  <div class="row">
    <nav class="col-lg-2">
      Menu
    </nav>
    <section class="col-lg-10">
      Section
    </section>
  </div>
  <footer class="row">
    <div class="col">
      Pied de page
    </div>
  </footer>
</div>

Le résultat se trouve à la figure suivante.

J'ai utilisé les classes pour grand écran avec les classes col-lg-* pour le menu et la section. On aura évidemment le même rendu sur très grand écran. Par contre à la réduction, on se retrouve avec un empilage dès qu'on passe en dessous de 992px :

Si je veux que ma mise en forme reste stable aussi pour les écrans moyens, comment faire ? Il suffit d'utiliser les classes col-md-* à la place de col-lg-*, ce qui a pour effet de déplacer la limite à 768px. De la même façon, l'utilisation des classes col-sm-* déplace la limite à 576px…

Mise en page plus chargée

Considérons maintenant un cas un peu plus riche :

<div class="container">
  <header class="row">
    <div class="col">
      Entete
    </div>
  </header>
  <div class="row">
    <nav class="col-md-2">
      Menu
    </nav>
    <section class="col-md-10">
      Section
      <div class="row">
        <article class="col-lg-10">
          Article
        </article>
        <aside class="col-lg-2">
          Aside
        </aside>
      </div>
    </section>
  </div>
  <footer class="row">
    <div class="col">
      Pied de page
    </div>
  </footer>
</div>

Le résultat se trouve à la figure suivante pour un écran grand ou très grand :

On a conservé l'en-tête et le pied de page, ainsi que le menu, mais on a intégré dans le contenu un article et un aside. L'ensemble est prévu pour fonctionner sur écrans grand et très grands. Pour les tablettes, on se retrouve avec un empilage pour le contenu de la section (utilisation de classes col-md-* pour tout sauf article et aside) :

Et comme on n'a rien prévu de spécial pour les smartphones, tout s'empile :

Plusieurs asides

Enrichissons encore la mise en page:

<div class="container">
  <header class="row">
    <div class="col">
      Entete
    </div>
  </header>
  <div class="row">
    <nav class="col-md-2">
      Menu
    </nav>
    <section class="col">
      Section
      <div class="row">
        <article class="col-lg-10">
          Article
        </article>
        <div class="col">
          <div class="row">
            <aside class="col">
              Aside 1
            </aside>
            <div class="w-100"></div>
            <aside class="col">
              Aside 2
            </aside>
          </div>
        </div>
      </div>
    </section>
  </div>
  <footer class="row">
    <div class="col">
      Pied de page
    </div>
  </footer>
</div>

Le résultat se trouve à la figure suivante pour un écran grand ou très grand :

Maintenant nous avons 2 asides à côté de l'article. Pour y arriver, il faut 2 niveaux d'imbrication. L'ensemble est prévu pour fonctionner sur écrans grand et très grands. Pour les tablettes, on se retrouve avec un empilage pour le contenu de la section (utilisation de classes col-lg-* pour tout ce qui est dans la section):

Et comme on n'a rien prévu de spécial pour les smartphones, tout s'empile :

Combinaison de classes col-*

Pour le moment nous avons utilisé juste une classe col-* pour chaque élément HTML. Mais il est parfois nécessaire d'en utiliser plusieurs lorsqu'on veut un rendu différent selon le support. Le plus simple est de voir un exemple. Je veux sur une page avoir des petites photos côte à côte. Supposons que je parte de cette structure pour cette partie de la page :

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
      body { margin-top: 10px; }
    </style>
  </head>

  <body>

    <div class="container">
      <section class="row">
        <div class="col-lg-2"><img src="images/t1.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t2.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t3.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t4.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t5.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t6.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t7.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t8.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t9.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t10.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t11.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t12.jpg" alt="Tigre"></div>
      </section>
    </div>

  </body>
</html>

Le rendu sur grand et très grand écran est parfait avec 6 photos sur la largeur :

Mais ça se gâte quand je rétrécis la fenêtre, puisque je sais qu'en dessous de 992px les éléments s'empilent. Du coup je me retrouve avec une image sur la largeur, et comme je les ai prévues en basse résolution, elles pixelisent :

L'idéal serait d'avoir :

Sur moyen et grand écran : 6 images sur la largeur.
Sur tablette : 4 images sur la largeur.
Sur smartphone en mode paysage : 3 images sur la largeur.
Sur smartphone en mode portrait : 2 images sur la largeur.

Comment réaliser cela ? Tout simplement en combinant les classes col-* :

<div class="container">
  <section class="row">
    <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t1.jpg" alt="Tigre"></div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t2.jpg" alt="Tigre"></div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t3.jpg" alt="Tigre"></div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t4.jpg" alt="Tigre"></div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t5.jpg" alt="Tigre"></div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t6.jpg" alt="Tigre"></div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t7.jpg" alt="Tigre"></div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t8.jpg" alt="Tigre"></div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t9.jpg" alt="Tigre"></div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t10.jpg" alt="Tigre"></div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t11.jpg" alt="Tigre"></div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t12.jpg" alt="Tigre"></div>
  </section>
</div>

Voici le résultat sur tablette (classes col-md-3 actives) :

Voici le résultat sur smartphone en mode paysage (classes col-sm-4 actives) :

Voici enfin le résultat sur smartphone en mode portrait (classes col-6 actives) :

On a donc obtenu facilement une adaptation de la présentation des photos en fonction du support utilisé pour les visualiser.

En résumé

Pour adapter l'affichage selon le support utilisé il suffit d'utiliser les bonnes classes ‌col-*.
Pour obtenir un comportement différent selon les supports on est parfois amené à combiner les classes col-*.