Easy-Micro

LOGICIEL Bootstrap
Gouttières
Les gouttières - Gutters - sont les espaces entre vos colonnes Bootstrap

Gouttières horizontales : gx

<div class="container">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">p-3 border bg-light</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">p-3 border bg-light</div>
    </div>
  </div>
</div>
 > Voir cet exemple Easy-Micro

Les classes gx et gy sont ajoutées à la classe row. Les deux exemples ci-dessus utilisent aussi les classes p-3 (padding de 3 pixels), border et bg-light (background-light)

Les gouttières entre les colonnes peuvent être supprimées avec la classe .g-0

Gouttières verticales : gy

<div class="container">
  <div class="row gy-3">
    <div class="col-6">
      <div class="p-3 border bg-light">p-3 border bg-light</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">p-3 border bg-light</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">p-3 border bg-light</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">p-3 border bg-light</div>
    </div>
  </div>
</div>
 > Voir cet exemple Easy-Micro

Gouttières horizontales et verticales : g

<div class="container">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>
 > Voir cet exemple Easy-Micro

Pour aller plus loin...


< Page précédente BOOTSTRAP Page suivante >