I've been searching the web, looking at the twig documentation, and looking at Grav skeleton code but I been stuck on this for 3 days now. I've tried |batch and |split but I didn't have any luck.
I want to make a set of responsive bootstrap rows/columns displaying a list of pages. I can display the list of pages, but I can't figure how to get the bootstrap code to repeat for each row. Basically, for every 4 items displayed, i want a new row to start for the next set of 4 items.
<div class="row">
<div class="col-md-6">
<div class="col-sm-6">
<h5>001</h5>
<img src="001_tn.png" >
<h4>ItemName</h4>
</div>
<div class="col-sm-6">
<h5>002</h5>
<img src="002_tn.png" >
<h4>ItemName</h4>
</div>
</div>
<div class="col-md-6">
<div class="col-sm-6">
<h5>003</h5>
<img src="003_tn.png" >
<h4>ItemName</h4>
</div>
<div class="col-sm-6">
<h5>004</h5>
<img src="004_tn.png" >
<h4>ItemName</h4>
</div>
</div>
</div>
The code above is pretty much what I'm looking for each row.
The code below is my current code.
<div class="row">
{% for child in collection %}
{% include 'partials/item_list.html.twig' with {'page':child} %}
{% endfor %}
</div>
This is my item_list.html.twig file
<a href="{{ page.url }}">
<div class="col-sm-6">
<div class="listbox">
<img src="{{page.url}}/{{page.header.item.num}}_tn.png" class="listtn center-block" alt="{{page.header.item.name}} Thumbnail">
<div class="itemlisttype">
{% for type in page.taxonomy.type %}
<p class="tag tag-expand {{type}}">{{ type }}</p>
{% endfor %}
</div>
<div class="pokelistnum">
<p class="tag dex-expand dex">#{{page.header.item.num}}</p>
</div>
<h3 class="listname tag itemlistname">{{page.header.item.name}}</h3>
</div>
</div>
</a>
Anyone know how I would i get 4 items into 1 row and then start a new row with the next 4 items?