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.

Canales 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

html

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">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

html

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

Canales verticales

Las clases .gy-* se pueden usar para controlar los anchos de los canales verticales dentro de una fila cuando las columnas se ajustan a nuevas líneas. Al igual que los canales horizontales, los canales verticales pueden causar algo de desbordamiento 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

html

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

Canales horizontales y verticales

Usa las clases .g-* para controlar los canales horizontales y verticales de la grid. En el ejemplo de abajo, usamos un ancho de canal más pequeño, por lo que no hay necesidad de la clase contenedora .overflow-hidden.

Padding de columna personalizado

html

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

Canales de columnas de fila

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

html

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

Sin canales

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 y añade .mx-0 al .row para evitar el desbordamiento.

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

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

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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 canales

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,
);