Easy-Micro

LOGICIEL Bootstrap
Colonnes par ligne
Utilisation de la classe row-cols-* pour définir le nombre de colonne par ligne

Deux colonnes par ligne

Alors que les classes normales .col-* s'appliquent aux colonnes individuelles en appliquant la classe col-* à toute les div quelle contient, les classes de colonnes de ligne row-cols-* sont un raccourci définies sur le parent .row. On obtient ci-dessous 2 colonnes par ligne.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Contenu</div>
    <div class="col">Contenu</div>
    <div class="col">Contenu</div>
    <div class="col">Contenu</div>
  </div>
</div>
 > Voir cet exemple Easy-Micro

Deux colonnes par ligne individuelles

Les classes normales .col-* s'appliquent aux colonnes individuelles. Soit vous utilisez la classe de colonnes de ligne, soit les classes de colonnes individuelles.

<div class="container">
  <div class="row">
    <div class="col-2">Contenu</div>
    <div class="col-2">Contenu</div>
  </div>
  <div class="row">
    <div class="col-2">Contenu</div>
    <div class="col-2">Contenu</div>
  </div>
</div>
 > Voir cet exemple Easy-Micro

  Les deux exemples ci-dessus sont équivalent. Soit vous rajoutez le raccourci row-cols-* à votre unique ligne, soit vous créez autant de ligne que nécessaire.

Trois colonnes par ligne

Notez la différence entre le nombre de row-cols-3 appliqué sur 4 div. On obtient 3 colonnes par ligne et une div à la ligne.

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Contenu</div>
    <div class="col">Contenu</div>
    <div class="col">Contenu</div>
    <div class="col">Contenu</div>
  </div>
</div>
 > Voir cet exemple Easy-Micro

Quatre colonnes par ligne

Si une div possède un col-6, elle va pousser la prochaine div à la ligne. On demande 4 colonnes par ligne mais la col-6 prend trop de place et pousse les autres.

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Contenu</div>
    <div class="col">Contenu</div>
    <div class="col-6">Contenu</div>
    <div class="col">Contenu</div>
  </div>
</div>
 > Voir cet exemple Easy-Micro

Nombre de colonne suivant taille de l'écran

On part de 4 colonnes par ligne pour les écrans MeDium et + puis 2 colonnes pour les écrans SMall puis 1 colonne par ligne pour les smartphones

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Contenu</div>
    <div class="col">Contenu</div>
    <div class="col">Contenu</div>
    <div class="col">Contenu</div>
  </div>
</div>
 > Voir cet exemple Easy-Micro

Pour aller plus loin...


< Page précédente BOOTSTRAP Page suivante >