Trying to change CSS of elements of a Loop in Laravel

Question

Question

Hi, I am trying to print the first two categories images with col-xl-6, and the remaining categories images with col-xl-4. The size of the first two images is different from the last three. Please let me know how it will work. If you can share code it'll be awesome! Thanks.

Blade-File

@foreach ($categories as $cat)
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6  column">
                <a href='/products/{{$cat->id}}'>
                    {{-- style="height: 460px; width:345px; --}}
                    <div class="img">
                        <img class="cat-img mx-2" id="cat-img" src="/uploads/categories/{{$cat->image_url}}" />
                    </div>
                </a>
                <div class="title text-center">
                    <h2>{{$cat->title}}</h2>
                    <a href='products/{{$cat->id}}'>Shop Now</a>
                </div>
            </div>
            @endforeach

Answer 1

There is a $loop variable available that you can check if the index of current item with.

https://laravel.com/docs/8.x/blade#the-loop-variable

@if ($loop->index === 0 || $loop->index === 1)
// do stuff
@endif