Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for Bootstrap grid system.

🤖 Looking for the LLM-optimized version?View llm.md

How they work

• Gutters are the gaps between column content, created by horizontalpadding. We setpadding-right andpadding-left on each column, and use negativemargin to offset that at the start and end of each row to align content.

• Gutters start at1.5rem (24px) wide. This allows us to match our grid to thepadding and margin spacers scale.

• Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters.

Horizontal gutters

.gx-* classes can be used to control the horizontal gutter widths. The.container or.container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we’ve increased the padding with.px-4:

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

An alternative solution is to add a wrapper around the.row with the.overflow-hidden class:

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

Vertical gutters

.gy-* classes can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the.row at the end of a page. If this occurs, you add a wrapper around.row with the.overflow-hidden class:

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

Horizontal & vertical gutters

.g-* classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won’t be a need to add the.overflow-hidden wrapper class.

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

Row columns gutters

Gutter classes can also be added torow columns. In the following example, we use responsive row columns and responsive gutter classes.

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

No gutters

The gutters between columns in our predefined grid classes can be removed with.g-0. This removes the negativemargins from.row and the horizontalpadding from all immediate children columns.

Need an edge-to-edge design? Drop the parent.container or.container-fluid and add.mx-0 to the.row to prevent overflow.

In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

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

Change the gutters

Classes are built from the$gutters Sass map which is inherited from the$spacers Sass map.

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