Level 16
Is there a question @ddsameera? Or this code is more of a tip on how to create Bootstrap rows & columns using PHP language?
1 like
Feb 21, 2021
6
Level 3
Loop row in bootstrap every 3 columns
Here is the way to create Bootstrap rows & columns using PHP language
Preview : https://snipboard.io/B23vxI.jpg
1st Method
@for($i=1;$i<=12;$i++)
<!--Row Start-->
@if($colNo%3==0)
@php echo "<div class='row'>"; @endphp
@endif
<!--Row Start-->
<!--div Column Start-->
@php echo "<div class='col-4'>"; @endphp
@php echo $i; @endphp
@php echo "</div>"; @endphp
<!--div Column End-->
@php $colNo++; @endphp
<!--Row End-->
@if($colNo%3==0)
@php echo "</div>"; @endphp
@endif
<!--Row End-->
@endfor
2nd Method
@foreach($backupFiles as $i=>$bf)
@if($colNo%3==0)
@php echo "<div class='row'>"; @endphp
@endif
@php echo "<div class='col-4'>"; @endphp
@php echo $i; @endphp
@php echo "</div>"; @endphp
@php $colNo++; @endphp
@if($colNo%3==0)
@php echo "</div>"; @endphp
@endif
@endforeach
Level 3
@chaudigv Good question. It 's TIP only
Level 56
col-4 will already wrap around every 3 columns. As Bootstrap 4 uses flex instead of floats for rows, there will be always 3 divs per row.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="row">
@foreach(range(1, 12) as $record)
<div class="col-4">{{ $record }}</div>
@endforeach
</div>
If you really want to manually add a .row div every 3 elements, you can use blade's $loop variable:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
@foreach(range(1, 12) as $record)
@if($loop->index % 3 === 0)
<div class="row">
@endif
<div class="col-4">{{ $record }}</div>
@if($loop->index % 3 === 0)
</div>
@endif
@endforeach
1 like
Level 8
What about
@foreach($files as $file)
@if($loop->index % 3 == 0)
.... This is is every 3rd
@endif
@endforeach
Level 75
@ddsameera Another option
@foreach (collect(range(1, 12))->chunk(3) as $chunk)
<div class="row">
@foreach ($chunk as $item)
<div class="col-4">{{ $item }}</div>
@endforeach
</div>
@endforeach
2 likes
Level 1
@MichalOravec thank you!
Please or to participate in this conversation.