OUJOOD.COM
Le système de grille de Bootstrap 5
Le système de grille de Bootstrap est construit avec flexbox et permet jusqu'à 12 colonnes sur la page.
Si vous ne désirez pas utiliser les 12 colonnes séparément, vous pouvez les regrouper 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 responsive, et les colonnes se réorganisent automatiquement en fonction de la taille de l'écran.
Assurez-vous que la somme est égale ou inférieure à 12 (il n'est pas nécessaire d'utiliser les 12 colonnes disponibles).
Classes de grille
Le système de grille Bootstrap 5 comporte six classes :
.col- (appareils très petits - largeur d'écran inférieure à 576px)
.col-sm- (petits périphériques - largeur d'écran égale ou supérieure à 576px)
.col-md- ( appareils moyens - largeur d'écran égale ou supérieure à 768px)
.col-lg- (grands périphériques - largeur d'écran égale ou supérieure à 992px)
.col-xl- ( périphériques xlarge - largeur d'écran égale ou supérieure à 1200px)
.col-xxl- ( périphériques xxlarge - largeur d'écran égale ou supérieure à 1400px)
Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamiques et plus souples.
Conseil : chaque classe est mise à l'échelle, donc si vous souhaitez définir les mêmes largeurs pour sm et md, il vous suffit de spécifier sm.
Structure de base d'une grille Bootstrap 5
Voici la structure de base d'une grille Bootstrap 5 :
Code
<!-- Contrôle de la largeur des colonnes et de la façon dont elles doivent apparaître sur les différents périphériques. --> <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> <!-- Ou laissez Bootstrap gérer automatiquement la mise en page --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
Dans le premier exemple, créez une ligne (<div class="row">). Ensuite, ajoutez le nombre de colonnes souhaité (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, dont la somme doit être égale à 12 pour chaque ligne.
Deuxième exemple : au lieu d'ajouter un nombre à chaque colonne, laissez bootstrap s'occuper de la mise en page, pour créer des colonnes de largeur égale : si vous utilisez deux éléments "col", vous obtenez une largeur de 50 % pour chaque colonne, tandis que si vous utilisez trois colonnes, vous obtenez une largeur de 33,33 % pour chaque colonne. Quatre cols = 25% de largeur, etc. Vous pouvez également utiliser .col-sm|md|lg|xl|xxl pour rendre les colonnes réactives.
Nous avons rassemblé dans le tableau ci-dessous quelques exemples de mises en page de base de la grille Bootstrap 5, mais vous pouvez utiliser d’autres configurations à condition que la somme soit inférieure ou égale à 12.
Exemple pour deux colonnes inégales en responsive
.col-sm-4 .col-sm-8
L'exemple suivant montre comment obtenir deux colonnes de différentes largeurs, en commençant par les tablettes et en passant par les grands ordinateurs de bureau supplémentaires pour obtenir deux colonnes de largeur respective 4 et 8 colonnes de base:
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap 5 Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Deux colonnes responsives inégales</h1>
<p>Redimensionnez la fenêtre du navigateur pour en voir l'effet.</p>
<p>Les colonnes s'empilent automatiquement l'une sur l'autre lorsque l'écran a une largeur inférieure à 576px.</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>