I am struggling to arrange multiple images in my booking system as they are all displaying in a single column rather than the desired layout
https://i.sstatic.net/1E8jO.png
What I had hoped for was a layout like this https://i.sstatic.net/v8K34.jpg Currently, I am using bootstrap to format the images. My goal is to iterate through the displayed images and showcase the first three in one row followed by the next four in the subsequent row, while also indicating the number of remaining images in the last column of the final row, similar to the example image
This is what I have managed to achieve so far
<div class="card-body">
<div class="portfolio-area">
@foreach ($images as $image)
<div>
<span class="image-block block2">
<a class="image-zoom" href="{{ asset('uploads/property/large/'.$image->path) }}" rel="prettyPhoto[gallery]">
<img src="{{ asset('uploads/property/small/'.$image->path) }}" class="img-responsive" alt="CEC Gallery"></a>
</span>
</div>
@endforeach
</div>
</div>
Here is how I am retrieving the images
$images = Photo::where(['p_id'=>$property_id])->get();
I would greatly appreciate any advice on how to properly loop through and style the images