One thing I've noticed is that when utilizing Bootstrap 3, the use of div.row would automatically create a vertical spacing between rows which was quite appealing. However, upon transitioning to Bootstrap 4, this automatic spacing seemed to disappear.
https://i.sstatic.net/A9p9R.png Here we have Bootstrap 4 in action.
https://i.sstatic.net/kV3ww.png And here is Bootstrap 3 for comparison.
Below is my code using Bootstrap 4:
<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="New city.."
#newCity
(keyup.enter)="addCity(newCity.value)">
<span class="input-group-btn">
<button class="btn btn-success"
type="button"
(click)="addCity(newCity.value)">Add</button>
</span>
</div>
</div>
</div>
</div>
I'm currently trying to figure out how to achieve the same spacing effect as seen with Bootstrap 3. I've added Bootstrap to my package.json and it's compiling fine in a new ng-cli project. Since I'm using sass, is there a way to override some variables or maybe my Bootstrap 4 code needs adjustment?