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 obligatoire d'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 à 576 px)
.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>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>Basic Grid Structure</h1>
<p>Resize the browser window to see the effect.</p>
<p>The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.</p>
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6 bg-primary text-white">50%</div>
<div class="col-sm-6 bg-dark text-white">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 bg-primary text-white">33.33%</div>
<div class="col-sm-4 bg-dark text-white">33.33%</div>
<div class="col-sm-4 bg-primary text-white">33.33%</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
</div>
<br>
<div class="row">
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
</div>
</div>
</body>
</html>
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.
Le tableau suivant résume le fonctionnement du système de grille Bootstrap 5 sur différentes tailles d'écran :
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | XXL (>=1400px) | |
|---|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes | Yes |