Bootstrap grid with php [duplicate] - php

Question

This question already has answers here:
Grid of responsive squares
(5 answers)
Closed 3 years ago.
I'm making a theme for my Omeka site in which I am calling an item and its various components using PHP. Each item is in its own div, and I have attempted to create a tile-like grid with Bootstrap. However, the divs only line up in a single vertical column. How do I make all divs line up in a row of three or four? I'm completely stumped. It works fine without the PHP (with multiple rows and manually added content) but won't work otherwise. This is what it looks like right now. And this is what I want the divs to look like:
Here is the html/php:
<?php foreach (loop('items') as $item): ?>
<div class="container">
<div class="item">
<div class="row">
<!-- attempt at square grid -->
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<div class="dummy"></div>
<div class="thumbnail purple">
Image: <?php $image = $item->Files; ?>
<?php if ($image) {
echo link_to_item('<div style="background-image: url(' . file_display_url($image[0], 'original') . ');" class="img"></div>');
} else {
echo link_to_item('<div style="background-image: url(' . img('defaultImage#2x.jpg') . ');" class="img"></div>');
}
?>
Title: <?php echo link_to_item(metadata('item', array('Dublin Core', 'Title')), array('class'=>'permalink')); ?><br>
Creator: <?php echo metadata('item', array('Dublin Core', 'Creator')); ?><br>
Subject: <?php echo metadata('item', array('Dublin Core', 'Subject')); ?><br>
Description: <?php echo metadata('item', array('Dublin Core', 'Description'), array('snippet'=>150)); ?><br>
<br>
</div>
</div>
</div>
</div><!-- end grid -->
And the CSS:
.dummy {
margin-top: 100%;
}
.thumbnail {
position: absolute;
top: 15px;
bottom: 0;
left: 15px;
right: 0;
text-align:center;
padding-top:calc(50% - 30px);
}
.item-item {
border: solid black 5px;
}

Answer 1

I'll give you a pseudo method of achieving this, harnessing array_chunk().
$chunks = array_chunk($array, 4);
foreach($chunks as $group): ?>
<div class="row">
<?php foreach($group as $element): ?>
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<?php // do your php stuff...?>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
Example