La grille responsive de Bootstrap est un système de mise en page qui s'adapte automatiquement à la taille de l'écran de l'utilisateur. Ce système est basé sur un ensemble de conteneurs, de lignes et de colonnes pour structurer et aligner le contenu de manière flexible et responsive. Dans cet article, nous allons explorer comment utiliser la grille responsive de Bootstrap avec des exemples concrets.
La grille Bootstrap (ou grid system) est un système de mise en page flexible et structuré qui permet de diviser une page web en colonnes (ou, plus précisément, des parties de page web). Elle est au cœur de Bootstrap et est conçue pour faciliter l'organisation du contenu de votre site, quelle que soit la taille de l'écran : ordinateur, tablette ou smartphone.
La grille (🇬🇧 grid) est constituée de trois éléments principaux :
Conteneurs (Containers) : Ils encapsulent votre grille. Il y a deux types de conteneurs :
.container : conteneur à largeur fixe qui change de taille à différents points de rupture..container-fluid : conteneur pleine largeur pour toute la largeur de l'écran.<div class="container"> ... </div>Lignes (Rows) : Les lignes sont utilisées pour grouper vos colonnes horizontalement et sont normalement utilisées à l'intérieur d'un .container.
<div class="container">
<div class="row">...</div>
</div>Colonnes (Columns) : Les colonnes sont les blocs de base de la grille. Elles doivent totaliser 12 pour chaque ligne au maximum.
<div class="container">
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
</div>
</div>
Dans l'image ci-dessus, on peut voir que la page contient deux sections qui ont une disposition différente.
On peut constater que la première section, "Album example", occupe toute la largeur de l'écran, et que son contenu est centré.
La deuxième section, avec les thumbnails, est découpée en 3 colonnes.
Parce que ces sections sont visuellement organisées différemment, qu'elles sont affichées différemment ou, autrement dit, que leurs colonnes sont organisées de façon différente, elles sont placées dans deux .row différentes.
colImaginons que vous voulez afficher 3 colonnes de tailles égales dans une ligne :
<div class="container">
<div class="row">
<div class="col">Colonne 1</div>
<div class="col">Colonne 2</div>
<div class="col">Colonne 3</div>
</div>
</div>Dans cet exemple :
container crée une zone centralisée.row crée une ligne.col divise cette ligne en trois colonnes égales.Dans cet exemple, le conteneur (container) englobe une ligne (row) qui contient trois colonnes visuelles. Comme il y a 3 colonnes, chacune d'elle occupe 1/3 de la largeur disponible.
Le système de grille de Bootstrap offre deux approches principales pour créer des colonnes dans une rangée (.row) :
.colEn utilisant simplement la classe .col, toutes les colonnes dans une rangée partagent automatiquement l'espace disponible de manière égale. Cela permet de créer rapidement une mise en page équilibrée sans avoir à calculer ou spécifier la largeur de chaque colonne.
Exemple :
<div class="row">
<div class="col">Colonne 1</div>
<div class="col">Colonne 2</div>
<div class="col">Colonne 3</div>
</div>Résultat : Chaque colonne occupe 1/3 de l'espace disponible (parce qu'il y a 3 colonnes, on divise la largeur par 3), quelle que soit la largeur de l'écran.
.col-x
Lorsque vous avez besoin de contrôler précisément la largeur d'une colonne, utilisez les classes spécifiques .col-x, où x représente un nombre de 1 à 12 correspondant à la fraction de la largeur totale de la rangée (12 étant la largeur maximale). Les colonnes avec des largeurs définies coexistent harmonieusement avec les colonnes flexibles (.col).
Exemple :
<div class="row">
<div class="col-8">Colonne 1 (8/12)</div>
<div class="col-4">Colonne 2 (4/12)</div>
</div>Résultat : La première colonne occupe 8/12 (ou 67%) de la largeur de la rangée, et la deuxième colonne occupe 4/12 (ou 33%).
En combinant ces deux approches, vous pouvez facilement créer des mises en page flexibles où certaines colonnes ont une largeur spécifique, tandis que d'autres s'adaptent dynamiquement à l'espace restant.
Quand on parle de 12 colonnes Bootstrap, il s'agit d'un système qui divise la largeur totale d'une page en 12 parties égales. Ces 12 colonnes ne sont pas visibles directement, mais elles servent de guide invisible pour aligner et organiser votre contenu de manière cohérente.
Cette image montre une page web avec un exemple d'album dans une mise en page basée sur la grille de Bootstrap. Les lignes verticales en surimpression représentent les colonnes du système de grille, utilisées pour aligner le contenu de manière réactive et structurée. Elles ne sont pas affichées/visibles sur la page. C'est juste un moyen de visualiser la division en colonnes.
Si vous voulez diviser votre page en 3 colonnes, chaque colonne doit "occuper" 4 des 12 colonnes disponibles.
La grille fonctionne sur le principe de 12 colonnes par ligne. Vous pouvez répartir votre contenu sur ces colonnes en fonction de vos besoins. Par exemple :
Si vous voulez diviser votre page en 3 colonnes, chaque colonne doit "occuper" 4 des 12 colonnes disponibles. Pourquoi 4? On divise le nombre de colonnes disponibles par le nombre de colonnes que l'on veut occuper: 12 / 3 = 4.
Au total, chaque ligne peut contenir maximum 12 colonnes.
Vous pouvez organiser votre contenu visuellement comme vous le souhaitez. Vous n'êtes pas obligés de créer des colonnes de même largeur. Vouc pouvez combiner différentes largeurs de colonne afin de créer le layout désiré, tant que vous avez un maximum de 12 colonnes par ligne.
Pour utiliser la grille responsive de Bootstrap, suivez ces étapes :
En conclusion, la grille responsive de Bootstrap est un outil extrêmement puissant pour créer des mises en page flexibles et adaptatives. En comprenant et en utilisant efficacement ce système, vous pouvez assurer que votre site web est esthétiquement agréable et fonctionnel sur une large gamme de dispositifs et de tailles d'écran.