I've been diligently working on a project with Bootstrap 4. In one particular section, I need to display images in rows within a list-group that pulls images from a folder. However, when using Bootstrap 4, the image sizes are too large, unlike when I switch back to Bootstrap version 3.3.7 where they display correctly without being oversized. Does this signify that Bootstrap 4 no longer supports list-groups? Am I overlooking something crucial here? Below is a snippet of my code:
https://i.sstatic.net/rmxn8.png
With Bootstrap 4, the above image appears in its full size.
Here's the code snippet from my Bootstrap 4 implementation:
<section id="gallery">
<div class="container">
<h3>Images Gallery</h3>
<div class="row">
<div class="list-group galleryy">
@if($images->count())
@foreach($images as $image)
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="/images/{{ $image->image }}">
<img class="img-responsive" alt="" src="/images/{{ $image->image }}" />
<div class='text-center'>
<small class='text-muted'>{{ $image->title }}</small>
</div>
</a>
</div>
@endforeach
@endif
</div>
</div>
</div>
Working bootstrap version:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Not working on:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353273d263d20">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">