Row padding between bootstrap 3 and 4 - html

Question

If I use Bootstrap 3, I would use div.row a lot and it would give me a nice spacing between rows vertically. However, when migrating to Bootstrap 4 I noticed the rows don't have any spacing anymore.
This is Bootstrap 4.
This is Bootstrap 3.
This is my Bootstrap 4 code:
<div class="container">
<div class="page-header col-8 offset-2">
<h1>{{ title }}</h1>
</div>
<div class="row">
<div class="col-8 offset-2">
<ul class="list-group" *ngIf="showCities">
<li class="list-group-item"
*ngFor="let city of cities">{{ city.name }}
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-8 offset-2">
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Nieuwe stad.."
#newCity
(keyup.enter)="addCity(newCity.value)">
<span class="input-group-btn">
<button class="btn btn-success"
type="button"
(click)="addCity(newCity.value)">Toevoegen</button>
</span>
</div>
</div>
</div>
</div>
How do I get the same spacing? I put bootstrap in my package.json and it compiles in a new ng-cli project. I also use sass, so can I override some variables, or?
Or is my Bootstrap 4 code just wrong?

Answer 1

In Bootstrap 3, the list-group has margin-bottom: 20px, but in 4.x it the list-group has no margin-bottom.
You can use the new spacing utils in 4.x to add a margin to the list-group. For example, mb-4 will add a bottom margin of 1.5rem;...
<div class="row">
<div class="col-12">
<ul class="list-group mb-4">
<li class="list-group-item">Bootply</li>
<li class="list-group-item">One itmus ac facilin</li>
<li class="list-group-item">Secondp t eros</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Nieuwe stad..">
<span class="input-group-btn">
<button class="btn btn-success" type="button">Toevoegen</button>
</span>
</div>
</div>
</div>
http://www.codeply.com/go/FmUSjJJX3V