div class="list-group" 在 bootstrap4 上不起作用

Question

I have been working on project with bootstrap 4 on one of its section I want to show images on row and inside of row I have list-group which displays images from folder but when the images are displayed bootstrap 4 the size is too big, But if I switch my bootstrap version to 3.3.7 images displayed correctly without oversizing(original sizes). So does this mean bootstrap 4 is no more supporting list-group? or did I miss something here is my code.

when using bootstrap 4 the above image comes in full size.

code inside my bootstrap 4

<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> <!-- text-center / end -->
                    </a>
                   
                </div> 
                @endforeach
            @endif
    
        </div> 
    </div> 
</div> 

working bootstrap

<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/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

Answer 1

If you use bootstarp 4, then the code structure should be like this:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <section id="gallery"> <div class="container"> <h3>Images Gallery</h3> <div class="row"> @if($images->count()) @foreach($images as $image) <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'> <div class="list-group galleryy"> <a class="thumbnail fancybox" rel="ligthbox" href="/images/{{ $image->image }}"> <img class="img-fluid" alt="" src="/images/{{ $image->image }}" /> <div class='text-center'> <small class='text-muted'>{{ $image->title }}</small> </div> <!-- text-center / end --> </a> </div> </div> @endforeach @endif </div> </div> </div>

for more information about 'list-group'. please check the following link below:

https://getbootstrap.com/docs/4.6/components/list-group/