Bootstrap two column misalignment - css

Question

I am trying to create a simple two column layout, but for some reason, some of the cells get skipped. (see: https://imgur.com/a/FE2ZwKY). I am using Laravel to get the products from the DB using a foreach loop. The code for one product looks like this:
<div class="col-md-6 mt-4">
<div class="card">
<img src="{{asset('storage/app/public/cover_images/'.$product->cover_image)}}" class="img-fluid" alt="">
<div class="card-content">
<div class="row">
<div class="col-md-6">
<h6 class="text-center">ROMÂNĂ</h6>
<h4 class="mt-4 text-center">
<b>{{$product->name_ro}}</b></h4>
<p>{{$product->desc_ro}}</p>
</div>
<div class="col-md-6">
<h6 class="text-center">ENGLISH</h6>
<h4 class="mt-4 text-center">
<b>{{$product->name_en}}</b></h4>
<p>{{$product->desc_en}}</p>
</div>
</div>
<h5 class="text-center">Pret: <b>{{$product->price}}</b>
</h5>
<hr>
<div class="button-wrapper">
<a href="{{url('/products/'.$product->id.'/edit/')}}">
<button type="submit" class="btn btn-warning">Editeaza</button></a>
<form action="{{ action('ProductsController#destroy', $product->id) }}" method="post">
#csrf
<input name="_method" type="hidden" value="DELETE">
<button type="submit" class="btn btn-danger">Sterge</button>
</form>
</div>
</div>
</div>
The code above is generated for every product there is. Any help is welcome, thanks!

Answer 1

a problem could be, that your <h4> text is not always the same length.
The headlines are pushing the content, and the cards are receiving different height values.
If you set a fixed height for h4, your problem is maybe solved.