I have some cards with images, but every image has 3 dimensions - small, normal, and height ( h: 180px / 270px / 450px ). And I used bootstrap cards, but it seems that I have some blank space between small and height class.
The second photo has different height than other photos, and it destroys the row.
<div class="news-pc " style="margin-left: 100px;margin-right: 100px;">
@if($newsC > 4)
@foreach($news as $news)<div class="col-md-3 "><a href="{{ url('news') }}/{{ $news->news_category }}/{{ $news->model }}/{{ $news->id }}/{{ $news->slug }}"><div class="card col-md-12 " style="margin-bottom: 30px">
@if($news->news_class == 'height')<div class="fill"><img src="{{ url('images/news') }}/{{ $news->image }}" class="card-img-top" alt="..." style="height: 450px;object-fit: cover"></div>
@elseif($news->news_class == 'normal')<div class="fill"><img src="{{ url('images/news') }}/{{ $news->image }}" class="card-img-top" alt="..." style="height: 270px;object-fit: cover"></div>
@elseif($news->news_class == 'normal')<div class="fill"><img src="{{ url('images/news') }}/{{ $news->image }}" class="card-img-top" alt="..." style="height: 180px;object-fit: cover"></div>
@endif<div class="card-body text-center"><a href="#" style="font-family: lato,sans-serif;color: #555;font-size: 15px;">{{ ucwords(str_replace('-', '', $news->news_category)) }}</a><br><a href="{{ url('http://dev.fabcreative.ae/models') }}/{{ $news->model }}" style="color: #555;padding-right: 15px;font-size: 25px;font-family: earthorbiter;">{{ ucwords(str_replace('-', '', $news->model)) }}</a><br><a href="{{ url('news') }}/{{ $news->news_category }}/{{ $news->model }}/{{ $news->id }}/{{ $news->slug }}" style="font-family: lato,sans-serif;color: #555;font-size: 25px;">{{$news->title}}</a></div></div></a></div>
@endforeach
@endif</div>How can I remove that space, but keeping the height of image ?
I used masonry layout but I can't put that text under my photos, and THAT'S WHY I'M USING BOOTSTRAP CARDS.