Gutters and CSS Grid Mode

A row sets --bs-gutter-x: 1.5rem; each column takes half as left and right padding, and the row's negative margins hide the outer halves. .gx-N changes horizontal gutters, .gy-N adds space between wrapped lines, and .g-N sets both, with N from 0 to 5 (0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem) and optional infixes. Because gutters are padding, style an element inside the column, like .box below. Wide gutters can overflow, so add .overflow-hidden to the container.

Bootstrap 5.1 2,007 added an experimental, opt-in CSS Grid mode that uses display: grid and gap. It is not in the CDN files; enable it when you compile the Sass 22,539 (Pre- and Postprocessors):

Opting in to CSS Grid modeSass

$enable-grid-classes: false; // turn off the flexbox .row and .col-* classes
$enable-cssgrid: true;       // generate .grid, .g-col-* and .g-start-*
@import "bootstrap/scss/bootstrap";

.grid replaces .row, .g-col-N and .g-col-md-N replace .col-*, and .g-start-N (1 to 11) replaces offsets. The listing pastes the generated rules it needs so it runs with the CDN stylesheet.

Gutter classes on a flex row, then CSS Grid modeHTMLLive

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<style>
  .box { border: 1px solid #1565c0; background: #e3f2fd; }
  /* Abridged output of $enable-cssgrid: true */
  .grid { display: grid; grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
    gap: var(--bs-gap, 1.5rem); }
  .grid .g-col-4 { grid-column: auto / span 4; } .grid .g-col-6 { grid-column: auto / span 6; }
  .grid .g-col-8 { grid-column: auto / span 8; } .grid .g-start-4 { grid-column-start: 4; }
</style>
<div class="container text-center overflow-hidden py-2">
  <div class="row gx-5 gy-2 mb-3">
    <div class="col-6"><div class="box">gx-5 gy-2</div></div>
    <div class="col-6"><div class="box">gx-5 gy-2</div></div>
    <div class="col-6"><div class="box">gx-5 gy-2</div></div>
  </div>
  <div class="grid" style="--bs-gap: .5rem">
    <div class="box g-col-4">g-col-4</div><div class="box g-col-8">g-col-8</div>
    <div class="box g-col-6 g-start-4">g-col-6 g-start-4</div>
  </div>
</div>

Browser output of 9

Grid mode has no negative margins; adjust spacing with --bs-gap (for example .25rem 1rem for rows and columns) and the column count with --bs-columns, which nested grids inherit. Use the flex grid for rows of content-sized items, and grid mode (or plain CSS Grid, Grid) when items must line up in two dimensions.

MENU