Modèle de base Bootstrap 5
- Page précédente Grille BS5 XXL
- Page suivante Modèle de base BS5
Nous avons rassemblé quelques exemples de mise en page en grille Bootstrap 5.
Trois colonnes égales
Utilisez sur un nombre d'éléments spécifié .col La classe, Bootstrap reconnaîtra le nombre d'éléments (et créera des colonnes de largeur égale). Dans l'exemple suivant, nous avons utilisé trois éléments col, chacun ayant une largeur de 33.33%.
Exemple
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Trois colonnes égales utilisant des nombres
Vous pouvez également utiliser des nombres pour contrôler la largeur des colonnes. Assurez-vous simplement que la somme est égale ou inférieure à 12 (il n'est pas nécessaire d'utiliser toutes les 12 colonnes disponibles) :
Exemple
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Trois colonnes inégales
Pour créer des colonnes inégales, vous devez utiliser des nombres. L'exemple suivant créera une division de 25%/50%/25% :
Exemple
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Définir la largeur d'une colonne
Cependant, il suffit de définir la largeur d'une seule colonne et de laisser les colonnes frères s'ajuster automatiquement autour. L'exemple suivant créera une division de 25%/50%/25% :
Exemple
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Plus de colonnes égales
Exemple
<!-- Deux colonnes égales --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- Quatre colonnes égales --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- Six colonnes égales --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
Vous pouvez également utiliser .row-cols-* Le contrôle de classe doit apparaître côte à côte dans les colonnes (peu importe le nombre de colonnes) :
Exemple
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Plus de colonnes inégales
Exemple
<!-- Deux colonnes inégales --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Quatre colonnes inégales --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- Définir les largeurs de deux colonnes --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
Égaliser la hauteur
Si une colonne est plus haute que l'autre (à cause du texte ou de la hauteur CSS), les autres suivront :
Exemple
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Colonnes imbriquées
L'exemple suivant montre comment créer une mise en page de deux colonnes, l'une des colonnes contenant deux autres colonnes :
Exemple
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Classes réactives
Le système de grille Bootstrap 5 comporte cinq classes :
.col-(appareils ultra-petits - largeur d'écran inférieure à 576px).col-sm-(appareils de petite taille - largeur d'écran égale ou supérieure à 576px).col-md-(appareils de taille moyenne - largeur d'écran égale ou supérieure à 768 pixels).col-lg-(appareils de grande taille - largeur d'écran égale ou supérieure à 992 pixels).col-xl-(appareils xl - largeur d'écran égale ou supérieure à 1200px).col-xxl-(appareils xxl - largeur d'écran égale ou supérieure à 1400px)
Il est possible de combiner les classes ci-dessus pour créer des mises en page plus dynamiques et flexibles.
Astuce :Chaque classe est agrandie proportionnellement, donc si vous souhaitez pour sm et md Pour définir la même largeur, il suffit de spécifier sm.
Empiler en horizontal
L'exemple suivant montre comment créer une mise en page de colonnes, qui commence par s'empiler sur les appareils ultra-petits, puis passe à une mise en page horizontale sur les appareils plus grands (sm, md, lg et xl) :
Exemple
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
Mélanger et correspondre
Exemple
<!-- Sur les appareils extrêmement petits, 50%/50% de séparation, sur les appareils de grande taille, 75%/25% de séparation --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- Sur les appareils extrêmement petits, petits, moyens, 58%/42% de séparation, sur les appareils de grande et très grande taille, 66.3%/33.3% de séparation --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- Sur les petits appareils, 25%/75% de séparation, sur les appareils de taille moyenne, 50%/50% de séparation, sur les appareils de grande et très grande taille, 33%/66% de séparation. Sur les appareils extrêmement petits, il est automatiquement empilé (100%). --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
Pas de gutter
Pour modifier l'espace entre les colonnes (espace supplémentaire), utilisez n'importe quel .g-1|2|3|4|5 Classe (.g-4 est la valeur par défaut).
Pour supprimer complètement les marges internes (gutter), utilisez .g-0：
Exemple
<div class="row g-0">
- Page précédente Grille BS5 XXL
- Page suivante Modèle de base BS5
