I have been testing the bootstrap cards; the only thing I want to do is put 4 cards, 2 in a line and another 2 in the line below, that's already achieved, the problem is that if for example, the first card has more content than the others, the design is out of phase and an empty space remains.
In what way can I achieve it, regardless of whether one card has more content than the other card and the one that should be below, where is it supposed to be?
I hope you can help me and please, I would really appreciate it if you could explain what is happening, I need to learn.
I leave the code of the page:
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header">
Subestacion A
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text">With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
Ultima actualización: Hace 2 minutos
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header">
Subestacion B
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
Ultima actualización: Hace 2 minutos
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card padding-0">
<div class="card-header">
Subestacion C
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
Ultima actualización: Hace 2 minutos
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header">
Subestacion D
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
Ultima actualización: Hace 2 minutos
</div>
</div>
</div>
</div>
</div>