L’organisation spatiale des pages web est l’une des premières préoccupations lorsque l’on crée un site web. Prévoit-on une bannière ? Faut-il un espace pour un menu à gauche ou en haut ? Y aura-t-il des blocs sur un des côtés pour recevoir certaines fonctionnalités comme la connexion ou des infos ? Faut-il prévoir un bas de page ?

Bootstrap ne répond évidemment pas à ces questions, mais il peut grandement vous faciliter la tâche, avec son système de grille, pour obtenir le résultat que vous souhaitez.

Petite visite guidée…

Le principe d’une grille

Une grille est tout simplement un découpage en cellules :

On peut alors décider d’organiser du contenu en utilisant pour chaque élément une ou plusieurs cellules :

La grille de Bootstrap comporte 12 colonnes comme dans l’illustration précédente. Vous commencez sans doute à comprendre l’utilité de cette organisation…

Terminologie

Une grille est découpée en rangées (appelées row, parce que tout est en anglais) et colonnes (col).

La grille de Bootstrap

La grille de Bootstrap n’est pas aussi idéale que celle présentée précédemment.

Le découpage en colonnes est tout simplement une division en pourcentage de la largeur de la fenêtre de visualisation et correspond donc à ce qu’on vient de voir. En revanche, il n’en est pas vraiment de même pour les rangées. Ces dernières ont la hauteur de leur contenu (voir figure suivante).

Moralité : une rangée prend la hauteur du plus gros élément qu’elle contient.

Puisque la largeur des colonnes est contrainte, le flux des données s’écoule verticalement, ce qui est un comportement HTML classique. Il faudra en tenir compte lors de la mise en page.

Organisation de la grille

Bootstrap est essentiellement un fichier CSS. Il comporte de nombreuses classes que l’on peut utiliser directement dans les balises HTML. La version 4 a adopté définitivement Flexbox, que je vous ai présenté au précédent chapitre, parce que ce nouveau système est maintenant reconnu par tous les navigateurs. Avec Bootstrap vous n’avez pas réellement besoin d’approfondir le sujet parce que le système de grille masque en grande partie le système utilisé.

La première classe à connaître est row, qui représente une rangée.

Cette classe établit des marges négatives à droite et à gauche pour équilibrer les marges de séparation des colonnes qui ont la même valeur  mais évidemment en positif :

.row {
  ...
  margin-right: -15px;
  margin-left: -15px;
}

Il faut ensuite définir le nombre de colonnes pour chaque élément en sachant qu’il y en a au maximum 12. Pour définir le nombre de colonnes utilisées pour chaque élément, on dispose de 5 batteries de 12 classes :

• Une colonne : col-1 ou col-sm-1 ou col-md-1 ou col-lg-1 ou col-xl-1
• Deux colonnes : col-2 ou col-sm-2 ou col-md-2 ou col-lg-2 ou col-xl-2
• …
• Douze colonnes : col-12 ou col-sm-12 ou col-md-12 ou col-lg-12 ou col-xl-12

Pour disposer d’une marge entre les colonnes ces classes prévoient un padding de 15px.

Pourquoi 5 sortes de classes pour les colonnes ?

Je vous ai déjà dit que Bootstrap est « responsive », ce qui veut dire qu’il s’adapte à la taille de l’écran. Il permet une visualisation aussi bien sur un écran géant que sur un smartphone.

Est-ce qu’il est possible de supprimer toutes ces marges ?

Oui. Il suffit d’utiliser la classe no-gutters avec la classe row. Ce qui a pour effet de supprimer toutes les marges à la fois que les lignes et les colonnes.

Mais que se passe-t-il pour les éléments d’une page web lorsque la fenêtre diminue ou s’élargit ?

On peut envisager deux hypothèses : les éléments se redimensionnent en restant positionnés, ou alors ils s’empilent quand la fenêtre devient plus étroite et se positionnent côte à côte quand elle s’élargit. Voici à la figure suivante l’exemple d’une partie de la page d’accueil du site colly.com qui illustre ce phénomène avec trois situations (grand écran, écran moyen et petit écran) :

Plutôt que de réduire les éléments au risque de les rendre illisibles, le choix a été fait de les empiler petit à petit quand la fenêtre devient plus étroite.

Une autre option pourrait consister à supprimer des éléments pas vraiment utiles, mais nous reviendrons plus tard sur ce point.

Pour le moment on va juste se demander comment on peut choisir entre les deux options présentées à la figure suivante.

C’est ici qu’interviennent les 5 sortes de classes vues précédemment pour les colonnes. Bootstrap considère 5 sortes de médias :

• les très petits genre smartphones en mode portrait (moins de 576px),
• les petits genre smartphones en mode paysage (plus de 576px mais moins de 768px),
• les moyens genre tablettes (plus de 768px mais moins de 992px),
• les grands (plus de 992px mais moins de 1200px),
• les très grands (plus de 1200px).

Vous trouverez à la figure suivante le tableau de la documentation officielle pour illustrer les différences de réaction selon la catégorie et les classes associées.

Le nom des classes est intuitif :

• rien pour les très petits écrans (valeur de référence)
• sm pour small,
• md pour medium,
• lg pour large,
• xl pour x-large.

Un petit exemple ?

Pour avoir un élément de 4 colonnes de large accouplé avec un élément de 8 colonnes de large sur un smartphone en mode portrait (et donc aussi tous les formats au-dessus) on a :

<div class="row">
    <div class="col-4">Largeur 4</div>
    <div class="col-8">Largeur 8</div>
</div>

La figure suivante illustre ce code avec l’effet quand on passe sur un écran plus grand.

Voici la version « tablette » :

<div class="row">
    <div class="col-md-4">Largeur 4</div>
    <div class="col-md-8">Largeur 8</div>
</div>

La figure suivante illustre ce code avec l’effet quand on passe sur un écran plus petit ou plus grand.

Vous remarquez que lors de l’empilage, les colonnes prennent toute la place disponible.

Et enfin, voici la version très grand écran :

<div class="row">
    <div class="col-lg-4">Largeur 4</div>
    <div class="col-lg-8">Largeur 8</div>
</div>

La largeur des éléments de la grille est calculée en pourcentage selon la fenêtre de visualisation. Rien n’interdit évidemment de mélanger des classes des catégories pour créer des effets particuliers avec certains éléments qui doivent s’empiler et d’autre pas (c’est même la stratégie utilisée pour la mise en page « responsive » comme nous allons bientôt le voir)…

Le conteneur

Une grille doit toujours  se placer dans un conteneur.

Bootstrap propose deux types de conteneur selon l’effet désiré :

• un conteneur de largeur fixe (qui s’adapte évidemment selon la largeur de l’écran utilisé) :

La classe à utiliser est container :

<div class="container">
  <!-- le contenu ici -->
</div>

• un conteneur à largeur « fluide » qui occupe toujours toute la largeur disponible :

La classe à utiliser est container-fluid :

<div class="container-fluid">
  <!-- Le contenu ici -->
</div>

Le centrage du conteneur est fait de façon classique avec de petites marges internes de 15px et les marges droite et gauche automatiques :

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

Ces règles sont communes aux deux types de conteneurs. La différence consiste à ajouter des règles pour le conteneur fixe pour tenir compte du media de visualisation utilisé :

// Smartphones en mode paysage
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

// Tablettes
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

// Grand écran
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

// Très grand écran
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Remarquez l’ordre des medias, du plus étroit vers le plus large. De cette manière on a une surcharge des règles cohérente.

Est-ce qu’on peut utiliser plusieurs conteneurs sur une même page ?

Pourquoi pas ? Je pense que ça peut être utile sur une page d’accueil longue avec plusieurs sections. Ça peut aussi être judicieux quand on utilise un système de template pour avoir un code modulaire.

Un exemple

Après cette petite mise en jambe pour vous présenter la notion de grille dans Bootstrap, on va passer en revue les possibilités dans le détail dans les chapitres suivants.

Mais pour visualiser tous les exemples qui vont suivre, je vous propose d’ajouter un peu de style, histoire d’afficher les éléments de façon explicite. Pour éviter de polluer le code HTML on va mettre ce style spécifique dans un fichier CSS particulier (ce fichier sera nommé tuto.css dans le code) :

body {
  padding-top: 10px;
}
[class*="col"], footer, aside {
  background-color: lightblue;
  border: 1px solid blue;
  border-radius: 4px;
  line-height: 40px;
  text-align: center;
}

Le seul but de ces règles de style est de faire apparaître nettement les éléments à l’écran.

Une petite marge interne en haut pour le corps, pour éviter que tout soit collé en haut de l’écran. Des bordures (avec des coins arrondis pour l’esthétique) et un fond coloré pour distinguer les éléments. Une hauteur fixée à 40 pixels, parce qu’étant donné que la hauteur des rangées dépend du contenu, on aurait un rendu hétéroclite.

Considérons un petit exemple pour se rendre compte du rendu :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/tuto.css">
  </head>
  <body>

    <div class="container">
      <div class="row">
        <div class="col-sm-2">
          2 colonnes
        </div>
        <div class="col-sm-3">
          3 colonnes
        </div>
        <div class="col-sm-7">
          7 colonnes
        </div>
      </div>
    </div>

  </body>
</html>

Voici le résultat :

Il ne nous reste plus qu’à pratiquer ‌cette grille, ce que nous allons effectuer dans les prochains chapitres…

Dans l’exemple j’ai opté pour des classes col-sm, donc on aura l’apparence de l’image ci-dessus lorsque la largeur est supérieure à 575px. Dans le cas contraire tout s’empile.

En résumé

• Bootstrap propose une grille pour positionner tous les éléments des pages web. Il utilise Flexbox en interne.
• Bootstrap distingue 5 types de supports de visualisation avec des classes dédiées pour les colonnes.
• Bootstrap propose deux types de conteneur : un fixe et un fluide.