Initiation au système de GRID Bootstrap

Article publié le 10 août 2020 sur mon ancien blog, republié ici tel quel. Les versions et les syntaxes évoquées sont celles de l’époque. Les captures d’écran d’origine n’ayant pas pu être récupérées, les passages qui s’appuyaient dessus ont été reformulés.

Bien commencer

Afin de débuter au mieux un projet utilisant Bootstrap je vous invite à vous rendre sur la page d’introduction. Plusieurs possibilités s’offrent à vous.

Vous pouvez copier et coller le css et le javascript séparément si vous avez déjà commencé un projet, ou dans le cas contraire, vous pouvez utiliser le template que propose Bootstrap. Vous utiliserez alors le CDN de Bootstrap. Vous retrouverez les liens ci-dessous, cependant il se peut que la dernière version de Bootstrap change, je vous conseille donc de vous baser sur celle présente sur la documentation.

CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Javascript

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Template de départ

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

Vous pouvez également installer Bootstrap avec npm ou gem :

# Via npm
npm install bootstrap

# Via gem
gem install bootstrap -v 4.5.2

Et pour finir télécharger le dossier Bootstrap et l’inclure dans votre projet. Chacun apporte des différences notables lors de leur utilisation mais nous n’aborderons pas ce sujet lors de ce tutoriel.

Le système de Grid

Une grid ?

Une grid est une grille permettant de placer des éléments sur une page.

Imaginez qu’une page web est une grille composée de 12 colonnes, de largeur égale, comme ceci :

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Parmi ces 12 colonnes on peut afficher du contenu de manières différentes. Un élément peut en occuper une seule, la moitié, ou les douze :

| 12                                                |
| 6                     | 6                         |
| 4           | 4           | 4                     |
| 3       | 3       | 3       | 3                   |

Pour placer ces éléments on utilise dans un premier temps la classe row.

Exemple :

<div class="container">
  <div class="row">
    
  </div>
</div>

Nous définissons une ligne sur laquelle nous allons placer des éléments (texte, images etc). Ce n’est que le début mais il faut bien comprendre les bases. Pour placer sur cette ligne des éléments on va utiliser la classe col

<div class="container">
  <div class="row">
    <div class="col">

    </div>
  </div>
</div>

Un col est une colonne. Voici maintenant un exemple très simple, nous allons placer deux éléments sur la même ligne.

<div class="container">
    <div class="row">
        <div class="col-6">
            Élément 1
        </div>
        <div class="col-6">
            Élément 2
        </div>
    </div>
</div>

Dans ce cas on a déterminé que les deux div prendraient 6 colonnes chacune sur la ligne.

Et si je veux rajouter un nouvel élément je peux faire ça ?

<div class="container">
    <div class="row">
        <div class="col-6">
            Élément 1
        </div>
        <div class="col-6">
            Élément 2
        </div>
        <div class="col-6">
            Élément 3
        </div>
    </div>
</div>

Si vous souhaitez voir apparaître ces trois éléments sur la même ligne cela ne fonctionnera pas. En effet comme expliqué précédemment il n’y a que 12 colonnes sur une ligne. Si deux éléments prennent à eux 12 colonnes (6+6) il est impossible de rajouter un élément sur la même ligne.

Cependant il est possible d’aller au delà de la limite de 12 pour une raison : faire un retour à la ligne.

<!-- 5 + 8 > 12 -->
<div class= "row">
   <div class ="col-5 bg-primary">
      <p>col-5</p>
   </div>
   <div class ="col-8 bg-secondary">
      <p>col-8</p>
   </div>
</div>

La deuxième colonne ne tient pas sur la ligne : 5 + 8 font 13, donc col-8 bascule sur une nouvelle ligne, sous col-5.

Ainsi pour rajouter un élément sur la même ligne il faut adapter notre code.

<div class="container">
    <div class="row">
        <div class="col-4">
            Élément 1
        </div>
        <div class="col-4">
            Élément 2
        </div>
        <div class="col-4">
            Élément 3
        </div>
    </div>
</div>

On remplace les col-6 par des col-4. De même si je veux rajouter un quatrième élément.

<div class="container">
    <div class="row">
        <div class="col-3">
            Élément 1
        </div>
        <div class="col-3">
            Élément 2
        </div>
        <div class="col-3">
            Élément 3
        </div>
        <div class="col-3">
            Élément 4
        </div>
    </div>
</div>

Vous l’avez donc compris, au maximum nous pouvons mettre 12 éléments sur une même ligne.

Voici une précision : Actuellement nous n’affectons à nos éléments que la classe col-X cela signifie que peu importe la taille de l’écran, les éléments s’afficheront toujours tels qu’ils sont définis. Il existe cependant une méthode pour gérer l’affichage en fonction de la taille d’écran sans utiliser de media queries. Nous verrons cette méthode plus tard 🙂 .

Concrètement, quatre col-3 restent côte à côte que l’écran fasse 1600 pixels de large ou 320 : les colonnes rétrécissent, mais elles ne passent jamais l’une sous l’autre. Sur un téléphone, chaque élément se retrouve donc dans un quart d’écran, souvent illisible.

Nous avons vu jusqu’à présent l’utilisation des grid de manière assez simple. Sachez que vous pouvez aller plus loin en imbriquant dans vos col d’autres row

<div class="container">
    <!-- Exemple 1 -->
    <div class="row">
        <div class="col-7">
            Élément 1
        </div>
        <div class="col-5">
            Élément 2
        </div>
    </div>
    <!-- Exemple 2 -->
    <div class="row">
        <div class="col-3">
            Élément 1
        </div>
        <div class="col-9">
            Élément 2
        </div>
    </div>
    <!-- Exemple 3 (on imbrique 2 col dans 1) -->
    <div class="row">
        <div class="col-6">
            Élément 1
            <div class="col-6">
               Sous-Élément 1
            </div>
            <div class="col-6">
                Sous-Élément 2
            </div>
        </div>
        <div class="col-6">
            Élément 2
        </div>
    </div>
</div>

Dans les exemples 1 et 2, chaque ligne est découpée en deux blocs de largeurs différentes : 7 et 5, puis 3 et 9. Dans l’exemple 3, l’élément de gauche occupe 6 colonnes, et à l’intérieur de celui-ci deux sous-éléments se partagent l’espace disponible.

Rendre le contenu responsive

Comme j’ai pu vous l’expliquer très rapidement tout à l’heure, nous pouvons gérer l’affichage des éléments en fonction de si nous sommes sur un écran d’ordinateur, tablette ou smartphone…

Voici un tableau qui explique l’ensemble des propriétés.

Préfixe de classe	Utilisation
`.col`	Pour les très petits appareils (Extra Small) d’une largeur inférieure à 576px.
`.col-sm`	Pour les petits équipements (Small) dont la largeur est supérieure ou égale à 567px.
`.col-md`	Pour les moyens équipements (Medium) dont la largeur est supérieure ou égale à 768px.
`.col-lg`	Pour les grands équipements (Large) dont la largeur est supérieure ou égale à 992px.
`.col-xl`	Pour les gigantesques équipements (Extra Large) dont la largeur est supérieure ou égale à 1200px.

Voici un exemple

<div class="row">
  <div class="col-sm-6">

  </div>
  <div class="col-sm-6">
    
  </div>
</div>

Ici j’indique que pour tout écran supérieur ou égal à 567 pixels mes éléments s’afficheront côte à côte. Dans le cas où un écran aurait une largeur inférieure, mes éléments ne seront plus côte à côte.

Au-dessus de 567 pixels, les deux blocs occupent chacun la moitié de la ligne. En dessous, chacun reprend les 12 colonnes et ils s’empilent l’un sous l’autre.

Comprenez bien que pour n’importe laquelle des propriétés inscrites dans le tableau cela fonctionnera de la même façon.

Avec col-md-6, le basculement se produit simplement plus tard : à 768 pixels au lieu de 567.

Combiner des classes

Un élément peut être combiné avec différentes classes : col-, col-sm-, col-md- ensemble. Par exemple, si je veux afficher 4 éléments sur une grande largeur mais que sur mon écran de tablette je ne souhaite avoir seulement que deux éléments c’est possible.

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-xl-3">
    </div>
    <div class="col-12 col-md-6 col-xl-3">
    </div>
    <div class="col-12 col-md-6 col-xl-3">
    </div>
    <div class="col-12 col-md-6 col-xl-3">
    </div>
  </div>
</div>

Voici un autre exemple :

<div class="container">
  <div class="row">
    <div class="col-md-2 col-sm-6 bg-primary">
      <p style="font-style:italic;">col-md-2</p>
      <p style="font-weight:bold;">col-sm-6</p>
    </div>
    <div class="col-md-10 col-sm-6 bg-success">
      <p style="font-style:italic;">col-md-10</p>
      <p style="font-weight:bold;">col-sm-6</p>
    </div>
  </div>
</div>

Sur un écran moyen, le premier bloc occupe 2 colonnes et le second 10. Sur un petit écran, les deux passent à 6 colonnes et se partagent la ligne à parts égales.

Merci d’avoir suivi ce tutoriel, laissez un commentaire si ce tutoriel vous a plu !