Le système de grille de Bootstrap est construit avec flexbox et autorise jusqu'à 12 colonnes sur la page.
Si vous ne souhaitez pas utiliser les 12 colonnes individuellement, vous pouvez regrouper les colonnes pour créer des colonnes plus larges :
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Le système de grille est réactif et les colonnes se réorganiseront automatiquement en fonction de la taille de l'écran.
Assurez-vous que la somme totalise 12 ou moins (il n'est pas nécessaire que vous utiliser les 12 colonnes disponibles).
Le système de grille Bootstrap 5 comporte six classes :
.col- (très petits appareils - largeur d'écran inférieure à 576 px)
.col-sm- (petits appareils - largeur d'écran égale ou supérieure à 576px)
.col-md- (appareils de taille moyenne - largeur d'écran égale ou supérieure à 768 px)
.col-lg- (grands appareils - largeur d'écran égale ou supérieure à 992 px)
.col-xl- (appareils xlarge - largeur d'écran égale ou supérieure à 1 200 px)
.col-xxl- (appareils xxlarge - largeur d'écran égale ou supérieure à 1 400 px)
Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamiques et flexibles.
Conseil : Chaque classe évolue, donc si vous souhaitez définir les mêmes largeurs pour sm et md, il vous suffit de spécifier sm.
Voici une structure de base d'une grille Bootstrap 5 :
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>Premier exemple : créer une ligne :
<div class="row">Ensuite, ajoutez le nombre souhaité de colonnes (balises avec les classes .col-*-* appropriées). La première étoile (*) représente la réactivité : sm, md, lg, xl ou xxl, tandis que la deuxième étoile représente un nombre, qui doit totaliser 12 pour chaque ligne.
Deuxième exemple : au lieu d'ajouter un numéro à chaque col, laissez bootstrap gérer la mise en page, pour créer des colonnes de largeur égale : deux " col" éléments=50 % de largeur pour chaque col, tandis que trois cols=33,33 % de largeur pour chaque col. Quatre colonnes=25 % de largeur, etc. Vous pouvez également utiliser .col-sm|md|lg|xl|xxl pour rendre les colonnes réactives.
Ci-dessous, nous avons rassemblé quelques exemples de dispositions de base de grille Bootstrap 5.
L'exemple suivant montre comment créer trois colonnes de même largeur, sur tous appareils et largeurs d’écran :
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>Essayez-le vous-même →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
</div>
</body>
</html>
L'exemple suivant montre comment créer quatre colonnes de même largeur en commençant par les tablettes et en passant à ordinateurs de bureau extra-larges. Sur les téléphones mobiles ou les écrans d'une largeur inférieure à 576 px, les colonnes s'empileront automatiquement les uns sur les autres :
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>Essayez-le vous-même →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
L'exemple suivant montre comment obtenir deux colonnes de différentes largeurs à partir de tablettes et mise à l'échelle vers de grands ordinateurs de bureau supplémentaires :
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>Essayez-le vous-même →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Two Unequal Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-8 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
Conseil : Vous en apprendrez davantage sur le système de grille plus loin dans ce didacticiel.