Ver en GitHub

Gutters

Los gutters son el padding entre tus columnas, usados para espaciar y alinear de forma responsive el contenido en el sistema de grid de Bootstrap.

On this page

Cómo funcionan

Los gutters son los espacios entre el contenido de las columnas, creados por padding horizontal. Establecemos padding-right y padding-left en cada columna, y usamos margin negativo para contrarrestarlo al inicio y final de cada fila para alinear el contenido.
Los gutters empiezan con 1.5rem (24px) de ancho. Esto nos permite coincidir nuestro grid con la escala de padding y margin spacers.
Los gutters se pueden ajustar de forma responsive. Usa clases de gutter específicas por breakpoint para modificar gutters horizontales, verticales y todos los gutters.

Gutters horizontales

Las clases .gx-* se pueden usar para controlar los anchos de los gutters horizontales. El padre .container o .container-fluid puede necesitar ajustarse si se usan gutters más grandes también, para evitar un overflow no deseado, usando una utilidad de padding coincidente. Por ejemplo, en el siguiente ejemplo hemos aumentado el padding con .px-4:

Padding de columna personalizado

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Una solución alternativa es añadir un contenedor alrededor del .row con la clase .overflow-hidden:

Padding de columna personalizado

<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Gutters verticales

Las clases .gy-* se pueden usar para controlar los anchos de los gutters verticales. Al igual que los gutters horizontales, los gutters verticales pueden causar algo de overflow por debajo del .row al final de una página. Si esto ocurre, añade un contenedor alrededor del .row con la clase .overflow-hidden:

Padding de columna personalizado

<div class="container overflow-hidden">
  <div class="row gy-5">
    <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>

Gutters horizontales y verticales

Las clases .g-* se pueden usar para controlar los anchos de los gutters horizontales; para el siguiente ejemplo usamos un ancho de gutter más pequeño, por lo que no habrá necesidad de añadir la clase contenedora .overflow-hidden.

Padding de columna personalizado

<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>

Gutters de row columns

Las clases de gutter también se pueden añadir a row columns. En el siguiente ejemplo, usamos row columns responsive y clases de gutter responsive.

Columna de fila

<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

Sin gutters

Los gutters entre columnas en nuestras clases de grid predefinidas se pueden eliminar con .g-0. Esto elimina los margins negativos del .row y el padding horizontal de todas las columnas hijas directas.

¿Necesitas un diseño de borde a borde? Elimina el .container o .container-fluid padre.

En la práctica, así es como se ve. Ten en cuenta que puedes seguir usando esto con todas las otras clases de grid predefinidas (incluyendo anchos de columna, niveles responsive, reordenaciones y más).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Cambiar los gutters

Las clases se construyen a partir del map de Sass $gutters que se hereda del map de Sass $spacers.

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