Maybe I’m doing something wrong, but I did go out to fiddle, and used a very simple version with bootstrap 5.

Here’s the setup.
https://jsfiddle.net/boilerplate/bootstrap/

I haven’t worked with bootstrap since around version 3, but I seem to remember that there used to be gutters between containers (and possibly rows) included in the framework.

It now appears that they have to be added on everything. The fiddle is using padding in the CSS but I think the preferred way to do it is to use the mb-* or the gy-* classes.

<div class="container mb-3">
  <h1>Gutters! </h1>
</div>

<div class="container overflow-hidden mb-3">
  <div class="row">
    <h3>First Container</h3>
  </div>
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
  </div>
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
  </div>
</div>
<div class="container mb-3">
  <div class="row">
    <h3>Second Container</h3>
  </div>
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
  </div>
</div>

So am I crazy? I have to explicitly add a gutter to every container, column or row now, or I get them jammed right against each other.

Mainly, I don’t want to find out that I am doing something wrong, and I’m going to add all this semantic html to my code base, and find out it was something simple, like I didn’t opt into this, or should have set it in the theme, or imported the _variables.scss or whatever.

As a note: I did attempt to use their mixing variables:

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

with no change in the output – so I assume I am doing something wrong, and about to go do it the hard way. Can someone please tell me how I should be accomplishing this?

The desired result would be spacing between natural elements vertically, like rows and containers. I KNOW I could add a

.container {
padding-top: 5px;
padding-bottom: 5px
}

but this just seems like I’m adding something back, that should already be there. If this is just how bootstrap is now, then what’s the recommended way everyone is doing this? I’m in an angular 17 project using SCSS

I’ve tried to use a JSFiddle using the framework, to see if it was project specific.
I’ve tried to add the spacing back using custom CSS classes (but this seems wrong)
I’ve tried reverting frameworks backwards and indeed the spacing exits back in bootstrap 3.

I used their documentation, and I cant find anything specific about it being “removed” – AND their own examples show the spacing in place…

starting here:
https://getbootstrap.com/docs/5.3/layout/grid/#auto-layout-columns
and then editing it (using the lightning bolt) – takes you to stackblitz with the example and it shows the spacing between rows exists, with no added classes.