Bootstrap rows/columns

Archive
1

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

{{page.header.item.name}} Thumbnail
{% for type in page.taxonomy.type %}

{{ type }}

{% endfor %}

#{{page.header.item.num}}

{{page.header.item.name}}

Anyone know how I would i get 4 items into 1 row and then start a new row with the next 4 items?

2

Have you looked at Gravstrap??? http://diblas.net/plugins/use-bootstrap-elements-in-the-grav-cms-way