Gutter

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Gutter [Horizontal]

.gx-5 .overflow-hidden
Custom column padding
Custom column padding
Regular
None column padding
None column padding
Overflow-hidden
Custom column padding
Custom column padding

Gutter [ Vertical ]

.gy-5 .overflow-hidden
   overflow-hidden
Custom column padding
Custom column padding
Custom column padding
Custom column padding
overflow-hidden [no gutters]
Regular column padding
Regular column padding
Regular column padding
Regular column padding

Gutter [ Horizontal & Vertical ]

.g-2 g-lg-3 & .row-cols-2 .row-cols-lg-3 & .row-cols-lg-5
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column

No Gutters

.col-sm-6 col-md-8 & .g-0 .col-md-4
.col-sm-6 .col-md-8
.col-6 .col-md-4
Gutter
<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>
Horizontal Gutter [Overflow-hidden]
<div class="container mt-4 overflow-hidden" id="ccontainer">
<div class="row gx-5 aw-highlight aw-grid">
<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>
No gutter
<div class="container mt-4">
<div class="row aw-highlight aw-grid">
<div class="col">
<div class="p-3 border bg-light">
None column padding
</div>
</div>
<div class="col">
<div class="p-3 border bg-light">
None column padding
</div>
</div>
</div>
</div>
Vertical Gutter
<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>
Vertical Gutter [Regular]
<div class="container overflow-hidden">
<div class="row">
<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>
Horizontal & Vertical Gutter
<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>
No Gutters
<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>

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