Bootstrap : Grille partie 1

bootstrap 4

La Grille de bootstrap utilise 3 classes principales :

  • Containeur (conteneur) : .container-fluid et .container
  • Row (rangée): .row
  • Colonne: .col

Container (conteneur)

Les conteneurs sont obligatoires pour pouvoir utiliser le système de grille de bootstrap. C’est à l’intérieur de ces derniers que l’on place les rangées et les colonnes.

Bootstrap 4 vous propose deux choix de conteneurs (responsives) :

  • Un conteneur de largeur fixe qui s’adapte a votre écran : .container.
  • Un conteneur de largeur « fluide » qui va occuper toute la largeur disponible : .container-fluid.

.container

container
container2

.container-fluid

container
container-fluid

Un seul conteneur par page suffit si toute la page a la même largeur fixe ou fluide mais si vous voulez des sections avec une largeur différente alors il vous faudra utiliser plusieurs conteneurs.

Si par exemple, vous voulez un header qui occupe toute la largeur de la page vous le mettrez à l’intérieur de la classe .container-fluid et si vos sections doivent avoir une largeur fixe vous rajouterez une classe .container et mettrez les sections dedans (voir ci-dessous les différents choix de conteneur).
Cette opération peut se répéter autant de fois que nécessaire.

Rangées (row) & Colonnes (col)

Le système de grille est composé de 12 colonnes qui s’étendent sur toute la largeur du conteneur. Entièrement responsives, elles s’adapteront automatiquement à la taille de votre écran.

Le total maximum de colonnes (col) par rangée (row) est de 12 mais vous pouvez en mettre moins si vous le désirez. Les colonnes peuvent s’additionner pour en constituer de plus grandes, comme nous allons le voir par la suite.

boostrap grille

Bootstrap utilise 5 classes différentes pour gérer l’affichage des colonnes en fonction de la résolution d’écran.

  • .col : Pour tous les écrans peu importe la résolution.
  • .col-sm : Petit écran (mobile) – largeur d’écran égale ou supérieure à 576px.
  • .col-md : Écran de taille moyenne : (tablette) – largeur d’écran égale ou supérieure à 768px.
  • .col-lg : Écran large (ordinateur)- largeur d’écran égale ou supérieure à 992px.
  • .col-xl : Très grand écran (écran large) – largeur d’écran égale ou supérieure à 1200px.

Si vous ne mentionnez pas de valeur pour chaque colonne (.col), elles auront toutes la même taille.

Important :
Chaque classe augmente d’échelle automatiquement donc si vous souhaitez un point de transition identique pour sm et md, il vous suffit de spécifier sm.

*A partir de sm (576px) les colonnes seront disposées côte à côte. En-dessous de sm (576px) les colonnes seront disposées les une en-dessous des autres. Je me répète, mais il est primordial que vous compreniez bien ça.

Pour ceux qui utilisent bootstrap 3, voici les différences de classes avec bootstrap 4 :

Bootstrap 3 vs Bootstrap 4

Grille basique :

Nous allons commencer par créer 12 colonnes, elles seront donc toutes de la même largeur.
En premier, je crée une rangée (.row) à l’intérieur de laquelle je place 12 colonnes (.col).
Je spécifie le point de transition sm et la largeur de la colonne (1).
La classe sm signifie que les colonnes s’adapteront parfaitement à un écran de petite taille (téléphones mobiles) et à tous les écrans de taille supérieure.

boostrap grille
bootstrap 4 grid

Colonnes avec des largeurs différentes :

bootstrap 4 grid
bootstrap 4 grid

Rangées avec un nombre différent de colonnes :

Ici nous créons 2 rangées :

  • La première rangée contient 1 élément de 6 colonnes de largeur.
  • La seconde rangée contient 2 éléments de 6 colonnes de largeur chacun.
bootstrap 4 grid
boostrap grille

Mise en page avec largeur automatique des colonnes :

Ici nous n’allons préciser ni la taille des colonnes ni la résolution d’écran :
Pour ce faire nous utiliserons la classe .col toute seule.

boostrap colonne

Bootstrap détecte les trois éléments (colonnes) et leur donne une largeur égale de 4 colonnes chacune pour remplir la rangée avec une largeur de 12 colonnes (12/3 = 4).

Bootstrap grille

On peut bien sûr combiner les colonnes automatiques et les colonnes à largeur spécifiques :

Mix grid
Mix colonne

La colonne 1 fait 6 de large comme on l’a spécifié (col-md-6).
Les deux autres colonnes se partagent automatiquement le reste soit 3 de large chacune pour arriver à un total de 12 pour toute la rangée.

On peut spécifier le point de transition (sm/md/lg/xl) tout en laissant la largeur des colonnes se faire automatiquement.

col-md
Mix colonnes

Dans cet exemple à partir d’une résolution d’écran de 768px (tablette), les colonnes seront côte à côte et auront une largeur automatique de 4 colonnes (12/3 = 4) en-dessous de cette résolution (mobile), elles se placeront les unes en-dessous des autres.

mix colonne 3

Colonnes avec une taille se limitant au contenu :

Classe : .col-auto

À utiliser avec précaution, car le rendu peut vite devenir chaotique comme ci-dessous.

Bootstrap grille
taille se limitant au contenu

A utiliser avec parcimonie car omme vous pouvez le constater, il n’y a plus de limite de largeur et la colonne 3 sort complètement de l’écran.

Changer l’ordre des colonnes :

Classe : .order

Pour de multiples raisons, on peut vouloir changer l’ordre d’affichage d’un élément. Plutôt que de tout changer, nous allons utiliser la class .order.
Dans cet exemple, nous allons utiliser 3 colonnes et allons déplacer la colonne 1 en dernière position.

col-sm-4
Bootstrap 4 Changer ordre

Afficher ou masquer une colonne en fonction de la taille de l’écran (résolution):

Classe : .d-sm/md/lg/xl-none (équivalent de display: none en css)

Dans cet exemple la colonne 1 va disparaitre au-dessus de 992px (tablette). Elle sera donc affichée sur les mobiles et tablettes, mais pas sur les ordinateurs et les écrans larges.

display none

Ordinateurs et écrans larges.

display none

Mobiles et tablettes

display none

Sauter des colonnes sur une grille :

Classe : .offset
offset

L’élément 2 est espacé de 4 colonnes par rapport à l’élément 1.
Les deux éléments font un total de 6 colonnes (3+3), l’espacement est de 4 colonnes, ce qui fait un total de 10 colonnes sur 12.
Il reste donc un espace vide de 2 colonnes entre l’élément 2 et la fin de la rangée.

offset
Autre exemple :
offset-sm-2

L’élément 1 est décalé d’une colonne.
L’élément 2 est décalé deux colonnes.
L’élément 3 est décalé d’une colonne.

offset-sm-2

Cet article a 3 commentaires

  1. Merci d’avoir créer ce site je ne trouve plus difficile le codage et je commence à m’y plaire!

  2. il semble avoir une erreur dans la partie “Afficher ou masquer une colonne en fonction de la taille de l’écran (résolution):” vous n’avez fait que recopier l’attribut “changer l’ordre ds colonnes”

    1. Exact, bien joué !

Laisser un commentaire