I have 5 items ( 3 items on first row & 2 items on 2nd row ) that loads something like this
Here’s my sample blade code
<div class="row"> @if( !empty( $data ) ) @foreach( $data as $field ) <div class="col-lg-4 services-overview-section__item"> <div class="services-overview-section__item--image"> <a href="{!! url('services-detail/'.$field->slug) !!}"> <img src="{{url($field->banner_image) }}"> <div class="services-overview-section__item--overlay"> <h3>{!! $field->name !!}</h3> </div> </a> </div> <div class="services-overview-section__item--content"> {!! $field->overview_description !!} </div> </div> @endforeach @endif </div>
But what I’m trying to do is something like this
By doing this I need to add a class named as ‘mid’ on this location
<div class="col-lg-4 services-overview-section__item mid">
Tried to use something like this
<div class="col-lg-4 services-overview-section__item {{ $loop->iteration % 2 == 0 ? 'mid' : '' }}">
But it doesn’t give me the right output like what I expected.
I just want to add class ‘mid’ for every 2nd item of the rows
Advertisement
Answer
A simple solution :
<div class="row"> @if( !empty( $data ) ) @php $itemThatNeedClass = 1; @endphp @foreach( $data as $field ) @php $customClass = ""; if ($loop->index === $itemThatNeedClass) { $customClass = "mid"; $itemThatNeedClass += 3; } @endphp <div class="col-lg-4 services-overview-section__item {{ $customClass }}"> <div class="services-overview-section__item--image"> <a href="{!! url('services-detail/'.$field->slug) !!}"> <img src="{{url($field->banner_image) }}"> <div class="services-overview-section__item--overlay"> <h3>{!! $field->name !!}</h3> </div> </a> </div> <div class="services-overview-section__item--content"> {!! $field->overview_description !!} </div> </div> @endforeach @endif </div>