div class="list-group" is not working on 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">

Enamul Kabir Enamul Kabir · Accepted Answer · 2021-06-02T11:40:24

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/

div class="list-group" is not working on bootstrap4

1 Answers