Row padding between bootstrap 3 and 4

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?

for both bootstrap versions, the `row` class don't have `margin-bottom` value but maybe there is another style affecting it — Mhd Alaa Alhaj, May 04 '17 at 09:15
if you want to make it as you wish, just add `margin-bottom: 15px` to `.row` inside a customized style sheet — Mhd Alaa Alhaj, May 04 '17 at 09:16

score 2 · Answer 1 · edited May 23 '17 at 12:34

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

Row padding between bootstrap 3 and 4

1 Answers1