Bootstrap 4 : la grille en action
Dans ce chapitre nous allons voir des exemples de mise en œuvre de la grille de Bootstrap.
On se lance
Une rangée
Commençons tranquillement en utilisant une seule rangée :
<!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">
6 col
</div>
<div class="col">
6 col
</div>
</div>
</div>
</body>
</html>
Dans la suite de ce chapitre je ne répéterai pas le code commun. D’autre part pour la lisibilité des exemples j’adopterai systématiquement un conteneur fixe.
Voici le résultat de ce code :
J’ai prévu deux éléments avec une simple classe col, du coup ils sont de largeurs égales et occupent chacun 6 colonnes.
De la même manière on peut utiliser des classes col-sm, col-md…
Si on ne veut pas des largeurs égales on peut spécifier le nombre de colonnes :
<div class="row">
<div class="col">
2 col
</div>
<div class="col-8">
8 col
</div>
<div class="col">
2 col
</div>
</div>
Voici le résultat de ce code :
L’élément central occupe la largeur imposée (8 colonnes), les deux autres éléments se partagent la place restante (2 colonnes chacun).
La mise en forme des éléments est effectuée par les règles présentes dans le fichier tuto.css que nous avons défini au chapitre précédent.
D’autre part dans ce chapitre je prendrai systématiquement le cas des classes correspondant aux plus petits supports pour éviter les empilements d’éléments. Nous verrons dans le chapitre suivant cet aspect de la grille.
Plusieurs rangées
Pour obtenir plusieurs rangées, il suffit d’utiliser plusieurs fois la classe row. Un petit exemple avec 3 rangées pour voir l’effet :
<div class="row"> <div class="col-1">1 col</div> <div class="col-2">2 colonnes</div> <div class="col-3">3 colonnes</div> <div class="col">6 colonnes</div> </div> <div class="row"> <div class="col">12 colonnes</div> </div> <div class="row"> <div class="col-4">4 colonnes</div> <div class="col">8 colonnes</div> </div>
Ce qui donne ce rendu :
Largeur variable
Par défaut les colonnes ont toujours la même largeur mais le passage à flexbox permet de jouer facilement sur des différences de largeur. Mais pour le coup on peut perdre un peu la notion de colonne. Regardez cet exemple :
<div class="row">
<div class="col">
Répartition du reste
</div>
<div class="col col-auto">
Contenu auto
</div>
<div class="col">
Répartition du reste
</div>
</div>
Avec ce rendu :
L’utilisation de la classe col-auto fixe les règles de flexbox pour que l’élément s’adapte au contenu (auto) :
.col-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
}
Il existe évidemment les classes col-sm-auto, col-md-auto…
Dans cette situation on se rend compte que l’utilisation de Flexbox peut nous éloigner de la notion de colonnes.
Eléments égaux sur plusieurs rangées
Puisqu’avec la classe col l’espace se répartit automatiquement comment faire pour avoir des éléments bien alignés sur plusieurs rangées ?
Par exemple avec ce code :
<div class="row">
<div class="col">
Elément 1
</div>
<div class="col">
Elément 2
</div>
<div class="col">
Elément 3
</div>
<div class="col">
Elément 4
</div>
</div>
J’obtiens logiquement cet aspect :
Si je les veux sur deux rangées je peux définir un nombre de colonnes parce que si on dépasse les 12 colonnes on passe automatiquement sur une nouvelle rangée (wrapping) :
<div class="row">
<div class="col-6">
Elément 1
</div>
<div class="col-6">
Elément 2
</div>
<div class="col-6">
Elément 3
</div>
<div class="col-6">
Elément 4
</div>
</div>
Je peux aussi utiliser deux classes row comme on l’a déjà vu ci-dessus :
<div class="row">
<div class="col">
Elément 1
</div>
<div class="col">
Elément 2
</div>
</div>
<div class="row">
<div class="col">
Elément 3
</div>
<div class="col">
Elément 4
</div>
</div>
Mais il existe aussi la classe w-100 pour obtenir le même effet :
<div class="row">
<div class="col">
Elément 1
</div>
<div class="col">
Elément 2
</div>
<div class="w-100"></div>
<div class="col">
Elément 3
</div>
<div class="col">
Elément 4
</div>
</div>
Pourquoi w-100 ?
Tout simplement pour width 100%. Il existe aussi w-25, w-50 et w-75.
Saut de colonnes
Bootstrap 3 permettait de sauter des colonnes avec des classes d’offset. Ces classes ont disparu avec la version 4. Désormais on utilise des utilitaires de marges qui apportent moins de souplesse mais plus de simplicité. Je parlerai plus précisément de ces utilitaires dans la prochaine partie et pour le moment on va se contenter de l’espacement automatique.
La classe est composée de trois éléments séparés par des traits d’union:
{propriété}{côtés}-{support optionnel}-auto
1) La propriété définit le type :
- m : marge
- p : remplissage (padding)
2) Les côtés définissent la position :
- t : haut (top)
- r : droite (right)
- b : bas (bottom)
- l : gauche (left)
- x : gauche et droite (axe x)
- y : haut et bas (axe y)
Par exemple la classeml-auto définit une marge automatique à gauche alors que la classemr-auto fait la même chose pour la droite.
On a aussi évidemment les classes ml-sm-auto, ml-md-auto, ml-lg-auto et ml-xl-auto…
Voici un exemple de saut :
<div class="row"> <div class="col-3">3 colonnes</div> <div class="col">6 colonnes</div> <div class="col-3">3 colonnes</div> </div> <div class="row"> <div class="col-3">3 colonnes</div> <div class="col-3 ml-auto">3 colonnes</div> </div>
Avec ce rendu :
On a ajouté une marge à gauche automatique.
Imbrication d’éléments
On doit souvent imbriquer des éléments dans une page web, est-ce possible avec Bootstrap ? Autrement dit inclure un row dans un col. Eh bien, on va tester ça tout de suite :
<div class="row">
<div class="col-8">8 colonnes
<div class="row">
<div class="col-3">3 colonnes</div>
<div class="col">6 colonnes</div>
<div class="col-3">3 colonnes</div>
</div>
</div>
</div>
Avec ce résultat :
On dirait bien que ça fonctionne !
Les imbrications peuvent s’enchaîner pour répondre à des besoins complexes :
<div class="row">
<div class="col-12">Premier niveau avec 12 colonnes
<div class="row">
<div class="col-8">Second niveau avec 8 colonnes
<div class="row">
<div class="col-4">Troisième niveau avec 4 colonnes</div>
<div class="col-6 ml-auto">Troisième niveau avec 6 colonnes
<div class="row">
<div class="col-3 mx-auto">Quatrième niveau avec 3 colonnes</div>
<div class="col-5 mx-auto">Quatrième niveau avec 5 colonnes</div>
</div>
</div>
</div>
</div>
<div class="col">Second niveau avec 4 colonnes</div>
</div>
</div>
</div>
Avec ce rendu :
Ordre des colonnes
Très logiquement, les colonnes s’affichent dans l’ordre du flux. Il peut arriver qu’on veuille bouleverser cet ordre. Regardez cet exemple :
<div class="row">
<div class="col">12 colonnes
<div class="row">
<div class="col order-3">Elément 1</div>
<div class="col order-2">Elément 2</div>
<div class="col order-1">Elément 3</div>
</div>
</div>
</div>
Avec ce rendu :
Les classes order-* permettent de fournir un ordre d’affichage avec une valeur allant de 1 à 12.
Il existe aussi les classes order-sm-*, order-md-*, order-lg-* et order-xl-*.
Un petit TP pour s’entraîner
Je vous propose pour clore ce chapitre de vous entraîner avec un petit TP. Le but est d’obtenir ce résultat :
Donc deux zones séparées avec imbrication et un offset dans la partie gauche.
Voici une solution (cherchez un peu avant de regarder) :
<div class="row">
<div class="col">6 colonnes
<div class="row">
<div class="col-4">4 colonnes</div>
<div class="col-4 ml-auto">4 colonnes</div>
</div>
</div>
<div class="col">6 colonnes
<div class="row">
<div class="col-4">4 colonnes</div>
<div class="col-8">8 colonnes</div>
</div>
</div>
</div>
Vous aviez réussi ? C’est parfait, on va pouvoir continuer. Si vous avez quelques difficultés je vous conseille de relire ce chapitre.
En résumé
- La grille de Bootstrap permet d’empiler des rangées de 12 colonnes.
- La grille de Bootstrap autorise le saut de colonnes.
- La grille de Bootstrap permet de rendre la largeur d’un élément automatique.
- La grille de Bootstrap permet de changer l’ordre des colonnes.
- La grille de Bootstrap permet d’imbriquer des rangées.
- La grille de Bootstrap crée automatiquement une nouvelle rangée en cas de débordement.
