Décaler les éléments d’une grille

Dans les deux derniers cours (Créer une page web multigrille avec Bootstrap 3 et Comprendre le concept de grille dans le webdesign), nous avons mis en place des éléments occupant l’intégralité de la largeur du corps de la page (12 colonnes).

Un seul élément occupant l'intégralité du corps de la page

Un seul élément occupant l’intégralité du corps de la page

Mais en pratique, nous avons toujours tendance à créer des pages web composées de plus d’un élément. Par exemple, comment faire à l’aide de Bootstrap 3 pour créer une page composée de deux éléments séparés par un vide, où le premier élément occupera les 6 premières colonnes, un vide de deux colonnes et un deuxième élément de 4 colonnes (ce qui fait 12 colonnes de la grille de Bootstrap 3).

Decalage des elements dans bootstrap 3

Pour le premiere élément de 6 colonnes, nous utiliserons la classe .col-md-6 qui le mettra en forme. Pour le deuxième élément, nous appellerons la classe .col-md-4. Le décalage (le vide entre les deux élément) sera obtenu à l’aide du jeu de classes .col-md-offset-*, l’astérisque correspondant au nombre de colonnes de décalage souhaité.

Le bout de code ci-dessous, nous permettra d’obtenir le décalage souhaité:

Ce qui donne le résultat ce-dessous sur notre écran :

Décalage entre les éléments d'une page

Décalage entre les éléments d’une page

Nous avons vu que le jeu de classes  .col-md-offset-* nous permet de gérer le décalage (créer un vide entre les éléments) sur une grille « medium devices », adaptée aux écrans d’ordinateurs de bureau classiques. Pour obtenir un décalage sur une grille « small devices » (tablettes), nous utiliserons .col-sm-offset-*. Concernant les smartphones, la grille « extra small devices » sera nécessaire avec .col-xs-offset-*. De la même manière, nous ferons appel à .col-lg-offset-* pour les écrans les plus larges.

Laisser un commentaire