i've created a collection of cards with bootstrap. As the cards have different height(based on the different text length), I want the cards to fill/placed on the empty spaces available. I'm not sure how to do it using bootstrap grid system. Thanks in advance.
Code
<div class="row justify-content-center">
@foreach($advices as $key=>$advices)
<div class="col-md-3">
<div class="card p-2 mt-3">
<div class="m-0 p-0 card-body">
<p class="mb-0">{{$advices->advice}}</p>
<small class="text-muted">
<cite class="float-right">~ {{$advices->alias}}</cite>
</small>
</div>
</div>
</div>
@endforeach
</div>