HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Exemples de grille Bootstrap 4

❮ Précédent Suivant ❯

Ci-dessous, nous avons rassemblé quelques exemples de dispositions de grille Bootstrap 4.

Trois colonnes égales

Utilisez la .colclasse sur un nombre spécifié d'éléments et Bootstrap reconnaîtra le nombre d'éléments (et créera des colonnes de largeur égale). Dans l'exemple ci-dessous, nous utilisons trois éléments col, qui obtiennent une largeur de 33,33 % chacun.

col
col
col

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 de la colonne. Assurez-vous simplement que la somme totalise 12 ou moins (il n'est pas nécessaire que vous utilisiez les 12 colonnes disponibles) :

col-4
col-4
col-4

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 répartition 25 %/50 %/25 % :

col-3
col-6
col-3

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éfinition d'une largeur de colonne

Cependant, il suffit de définir la largeur d'une seule colonne et de redimensionner automatiquement les colonnes sœurs autour d'elle. L'exemple suivant créera une répartition 25 %/50 %/25 % :

col
col-6
col

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

1 sur 2
2 sur 2
1 sur 4
2 sur 4
3 sur 4
4 sur 4
1 sur 6
2 sur 6
3 sur 6
4 sur 6
5 sur 6
6 sur 6

Exemple

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<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 equal columns -->
<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>

Cols de ligne

Vous pouvez également contrôler le nombre de colonnes qui doivent apparaître les unes à côté des autres (quel que soit le nombre de colonnes), avec les .row-cols-*classes :

1 sur 2
2 sur 2
1 sur 4
2 sur 4
3 sur 4
4 sur 4
1 sur 6
2 sur 6
3 sur 6
4 sur 6
5 sur 6
6 sur 6

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

1 sur 2
2 sur 2
1 sur 4
2 sur 4
3 sur 4
4 sur 4
1 sur 4
2 sur 4
3 sur 4
4 sur 4

Exemple

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- Four Unequal Columns -->
<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>

<!-- Setting two column widths -->
<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>

Hauteur égale

Si l'une des colonnes est plus haute que l'autre (en raison de la hauteur du texte ou du CSS), le reste suivra :

Beaucoup de douleur est très importante, il n'y a pas de différence dans la nourriture et les sens. Et la douleur que je peux avoir ce week-end. Aucun mauvais iriure ne le ramasse, et des appartements zril ou quelque chose comme ça, ont subventionné l'un de nous qui a vu le football. Non notre douleur est à lire par moi, ça devrait lui faire mucus Platon.
col
col

Exemple

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Colonnes imbriquées

col-8
col-6
col-6
col-4

L'exemple suivant montre comment créer une mise en page à deux colonnes, avec deux autres colonnes à l'intérieur de l'une des 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 4 comporte cinq classes :

  • .col-(très petits appareils - largeur d'écran inférieure à 576 pixels)
  • .col-sm-(petits appareils - largeur d'écran égale ou supérieure à 576px)
  • .col-md-(appareils moyens - largeur d'écran égale ou supérieure à 768 pixels)
  • .col-lg-(grands appareils - largeur d'écran égale ou supérieure à 992px)
  • .col-xl-(appareils xlarge - largeur d'écran égale ou supérieure à 1200px)

Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamiques et flexibles.

Conseil : Chaque classe est mise à l'échelle, donc si vous souhaitez définir les mêmes largeurs pour smet md, il vous suffit de spécifier sm.

Empilé à l'horizontale

col-sm-9
col-sm-3
col-sm
col-sm
col-sm

L'exemple suivant montre comment créer une disposition en colonnes qui commence par être empilée sur de très petits appareils, avant de devenir horizontale sur des 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 assortir

col-6 col-sm-9
col-6 col-sm-3
col-7 col-lg-8
col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

Exemple

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<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>

<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<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>

<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (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 gouttières

Ajoutez la .no-guttersclasse au .rowconteneur pour supprimer les gouttières (espace supplémentaire) :

La douleur elle-même est importante, mais la douleur est renforcée par le processus d'adipiscing, mais je lui donne le temps de la réduire afin que je fasse du bon travail et de la douleur.
Dans le but d'arriver au minimum, qui des nôtres devrait exercer un emploi, sauf pour en profiter des conséquences.
Mais afin que vous compreniez d'où chaque erreur née est le plaisir d'accuser et de louer la douleur, j'ouvrirai toute l'affaire, et j'expliquerai les choses mêmes qui ont été dites par cet inventeur de la vérité et comme l'architecte de la vie bénie.

Exemple

<div class="row no-gutters">

❮ Précédent Suivant ❯