Plan du cours
Dans cette leçon nous allons voir comment Bootstrap gère la position des éléments.
- Conteneur
- Rangées et colonnes
- Gérer l’affichage des colonnes en fonction de la résolution d’écran
- Grille basique
- Colonnes avec des largeurs différentes
- Rangées avec un nombre différent de colonnes
- Mise en page avec largeur automatique des colonnes
- Colonnes avec une taille se limitant au contenu
- Changer l’ordre des colonnes
- Afficher ou masquer une colonne en fonction de la taille de l’écran (résolution)
- Sauter des colonnes sur une grille
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-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.
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.
Pour bien comprendre ce système de classe en rapport avec la taille (résolution) de l’écran, il est bon de rappeler ce que signifie point de transition.
Avec bootstrap, le point de transition est le moment ou les éléments (colonnes) ne vont plus se placer les uns à côté des autres mais les uns en-dessous des autres.
Ex : .col-md veut dire que le point de transition se situe juste en-dessous de 768px et qu’à partir d’une résolution d’écran de 767px les éléments se placeront les uns en-dessous des autres et non plus côte à côte.
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 :
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.
Colonnes avec des largeurs différentes :
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.
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.
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).
On peut bien sûr combiner les colonnes automatiques et les colonnes à largeur spécifiques :
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.
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.
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.
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.
Afficher ou masquer une colonne en fonction de la taille de l’écran (résolution):
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.
Ordinateurs et écrans larges.
Mobiles et tablettes
Sauter des colonnes sur une grille :
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.
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.
Merci d’avoir créer ce site je ne trouve plus difficile le codage et je commence à m’y plaire!
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 »
Exact, bien joué !
Bravo Laurent pour ce cours très clair et compréhensible
ça m’a aidé à comprendre pourquoi je n’avais pas mes 3 colonnes (il me manquait la class row qui entoure les class col)
Je rajoute ton site dans mes favoris
Merci beaucoup et bonne journée
Bruno
Bravo et merci
Ce cours sur bootstrap4 est clair simple a comprendre idéal pour les débutants comme moi.
Un forum serait le bienvenu afin de créer une communauté autour de ce site pour y partager nos expériences et entraides
grisbi
bonne continuation
Bonjour,
J’ai essayé les premiers blocs de code dans votre article et rien ne fonctionne.
Quand j’utilise container et container-fluid, il n’y a aucune différence sur mon navigateur chrome.
Quand je fais les 12 colonnes, quelque soit la taille du bloc (et des blocs), j’ai les 12 colonnes collées les uns aux autres sur une partie de mon écran et non sur toute la ligne. Même les agrandissement de colonnes ne change rien. C’est toujours identique.
Vous trouverez mon problème sur le lien de mon site.
Merci d’avance pour votre aide.
Albayrak, la syntaxe de votre code est truffée d’erreurs grossières !
Il va falloir bosser un minimum !!!