Why is there no vertical space between Bootstrap 4 rows

Question

I am trying to migrate from Bootstrap 3 to Bootstrap 4. Bootstrap 3 had vertical space between rows by default, but this is not the case in Bootstrap 4. Can someone please explain why? Or am I missing something in my HTML?

<div class="container-fluid">     <div class="row">         <div class="col-9">             <div class="row">                 <div class="col">                     <div class="card">                         <div class="card-header">                             Card01                         </div>                         <div class="card-body">                             Card01                         </div>                     </div>                 </div>             </div>             <div class="row">                 <div class="col">                     <div class="card">                         <div class="card-header">                             Card02                         </div>                         <div class="card-body">                             Card02                         </div>                     </div>                 </div>             </div>         </div>     </div> </div> 

Answer 1

Bootstrap 5 (update 2021)

Bootstrap 5 has new gutter classes that are specifically designed to adjust the gutter for an entire row. Additionally, there is now the concept of vertical gutters to adjust the vertical spacing between rows and columns that wrap inside each row.

• use g-0 for no gutters
• use g-(1-5) to adjust horizontal & vertical gutters via spacing units
• use gy-* to adjust vertical gutters
• use gx-* to adjust horizontal gutters

Bootstrap 4 (original answer)

Rows no longer have margin-bottom in Bootstrap 4. Use the new spacing utils (mb-4).

See https://stackoverflow.com/a/42960338/171456.