Putting items into a grid using Bootstrap

Hi,

I am making a custom theme that uses Twitter bootstrap. I want to organize my items on items/browse fall into a a responsive grid, each div containing the item information and link to the specific item. However, the divs show up as a single vertical column like this. But I want it to look something like this. I've been trying to figure this out for two days and I am completely stumped!

Here is the partial code on the /items/show page:

<?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')); ?>
Creator: <?php echo metadata('item', array('Dublin Core', 'Creator')); ?>
Subject: <?php echo metadata('item', array('Dublin Core', 'Subject')); ?>
Description: <?php echo metadata('item', array('Dublin Core', 'Description'), array('snippet'=>150)); ?>

</div>
</div>
</div>
</div><!-- end grid -->

And the CSS:

.container {
width: 100%;
height: auto;
display:inline-block;
}

.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;
}

This is more of a Bootstrap or general CSS question than an Omeka one, so this might not be the best place to get help for your problem. A "live" example of the problem page (or even better, a minimal example including just enough code/markup to cause the issue) would also probably be a good idea, wherever you look for help with something like this.

As an offhand guess, I'd say your problem likely lies at least partially with those extra divs you have in your HTML that you don't list any styles for in your CSS snippet.

Hi John,

Thank you for your feedback! I really appreciate it. I looked at it for so long I just couldn't understand what was wrong, but I've sort of figured it out now. Thanks again!

Greetings HCGriggs- did you figure out a way to make the files display in a grid view? Generally, speaking, I'd like my collectiosn to be a gridview, but they only show up in a long line. If you've figured out a work around to this, I'd like to know. Omeka folks - is it accurate that there's no simple want to make the Berlin theme display collectiosn as a grid, the way exhibits can be displayed?