Gutters ^commun

Les gutters (gouttières) sont les espaces entre vos colonnes, utilisés pour espacer et aligner le contenu de manière réactive dans le système de grille Bootstrap.
Chaque colonne a un padding left et right égal à la moitié de la gouttière et le conteneur des colonnes dispose de marges latérales négatives équivalentes.

Elles peuvent être ajustées en fonction de l'affichage. Utilisez des classes de gouttières spécifiques aux points de rupture pour modifier les gouttières horizontales, verticales et toutes les gouttières.

Par défaut, la gutter vaut 1.5rem (= $spacer-4 ) et toutes les valeurs sont héritées des $spacer-*.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Les classes .gx-* (de 0 à 5) positionnées sur la balise .row permettent de contrôler la largeur des gouttières horizontales.

<div class="row gx-3">
    <div class="col">
        <div class="labo-col-item">Col inner - Gutter 3</div>
    </div>
    <div class="col">
        <div class="labo-col-item">Col inner</div>
    </div>
</div>

Il est possible que des débordement latéraux nécessitent des ajustements.
Une première solution consiste à mettre un padding latéral sur un conteneur.
Une autre solution consiste à mettre la classe .overflow-hidden sur un container.

<div class="container overflow-hidden">
    <div class="row gx-4">
        ...
    </div>
</div>

Les classes .gy-* (de 0 à 5) positionnées sur la balise .row permettent de contrôler la hauteur des gouttières verticales.

<div class="row gy-3">
    <div class="col-12">
        <div class="labo-col-item">Col</div>
    </div>
    <div class="col-12">
        <div class="labo-col-item">Col</div>
    </div>
</div>

Même principe pour corriger lres éventuels débordements haut et bas.
La solution consiste à mettre la classe .overflow-hidden sur un container.

Les classes .g- (de 0 à 5) positionnées sur la balise .row permettent de contrôler la taille des gouttières.

<div class="row g-3">
    <div class="col-6">
        <div class="labo-col-item">Col</div>
    </div>
    <div class="col-6">
        <div class="labo-col-item">Col</div>
    </div>
    <div class="col-6">
        <div class="labo-col-item">Col</div>
    </div>
    <div class="col-6">
        <div class="labo-col-item">Col</div>
    </div>
</div>

De la même façon qu'il est possible de piloter le nombre d'items par ligne via l'ajout de classes responsives sur le .row, il est possible de préciser la gutter pour chaque device. Il suffit d'ajouter la classe g-device-* (device = rien | xs | sm | md | lg | xl | xxl) et (* = 0 à 5).

<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
        <div class="labo-col-item">Col</div>
    </div>
    ... x 10
</div>

Il est possible de supprimer les gouttières via la classe .g-0.