Bootstrap thumbnail grid not starting a new row co

Question

I have a grid of thumbnails oin my rails app but I am having trouble getting bootstrap to display the grid correctly! As you can see below however it is not starting a new row correctly! not sure what to do here. I've included my HTML below and as far as I can see it conforms with the bootstrap examples.

<div id="image-grid" class="col-lg-10">
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/1"> 
<img alt="Img 0259" src="/system/images/images/000/000/001/thumb/IMG_0259.JPG?1369368826">
2013-05-24
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/3"> 
<img alt="Img 0034" src="/system/images/images/000/000/003/thumb/IMG_0034.JPG?1369649370">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/2"> 
<img alt="Img 0008" src="/system/images/images/000/000/002/thumb/IMG_0008.jpg?1369649198">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/4"> 
<img alt="Rsz 1971061 10153145204760484 336557482 n" src="/system/images/images/000/000/004/thumb/rsz_1971061_10153145204760484_336557482_n.jpg?1377656209">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/5"> 
<img alt="Digital radiograph1" src="/system/images/images/000/000/005/thumb/digital_radiograph1.jpg?1377659810">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/6"> 
<img alt="Pamo" src="/system/images/images/000/000/006/thumb/pamo.jpg?1377659876">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/7"> 
<img alt="Tooth x ray 1" src="/system/images/images/000/000/007/thumb/tooth-x-ray_1.jpg?1377659952">
2013-08-28
</a>            </div>  
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/8"> 
<img alt="Fig9b" src="/system/images/images/000/000/008/thumb/fig9b.jpg?1377664192">
2013-08-28
</a></div>
<div class="col-sm-6 col-md-2"> 
<span class="glyphicon glyphicon-plus">
<a href="/images/new">Upload New Image</a>
</span>
</div>
</div>
</div>

Answer 1

I had a similar problem. I fixed with this script pretty quickly and painless free:

<script>
  $.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
    $('#projects_container').isotope({
      itemSelector : '.project_item',
      layoutMode : 'fitRows'
    });
  });
</script>

for your case, replace '#projects_container' for '#image-grid' and add a class for each item div.

Answer 2

It's a height issue.

I'm solving the same thing right now, and you basically have two options if you want to ditch the extraneous row containers, and have the whole set of columns grid out in a single row responsively:

1. you can make sure that all of the elements in your grid are the same height by constraining the content with css (or by simply controlling the content that gets shoved into each element)

2. You can add a little jQuery code to your page to scan your thumbnail elements, and expand their containers to the same height as the largest element in the grid. Google around for equal height jQuery plugins—there are a bunch. One additional thing you'll need to ensure that you do as well is to trigger the plugin again on resize, as it's likely that your elements will wind up with different heights again due to the responsive behaviours allowing content to expand/contract. A combination of bootstrap's col classes and a bit of jQuery height-balancing is working quite well for me.

Answer 3

This will solve your issue

<div class="col-xs-6 col-md-3">
   <div class="well">
       content goes here...
   </div>
</div>

Answer 4

I had this problem using different sized images in a thumbnail div using the Bootstrap3 framework. This caused the rows and grids to break apart depending on image sizes. My work around was to use a nifty little jquery plugin called "equalize" and called it on the "row" class.

This worked perfectly, you should give it a try.

Answer 5

Please describe or add images to show how your grid should look (desktop, tablet and mobile). Now we have to guess.

A row with class col-md-2 colomns can contain 6 columns (6 x 2 = 12). Try the code below, with nested columns (see: http://getbootstrap.com/css/#grid-nesting).

<div class="container">     
<div class="row">
<div id="image-grid" class="col-sm-12 col-md-10">
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/1"> 
<img alt="Img 0259" src="/system/images/images/000/000/001/thumb/IMG_0259.JPG?1369368826">
2013-05-24
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/3"> 
<img alt="Img 0034" src="/system/images/images/000/000/003/thumb/IMG_0034.JPG?1369649370">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/2"> 
<img alt="Img 0008" src="/system/images/images/000/000/002/thumb/IMG_0008.jpg?1369649198">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/4"> 
<img alt="Rsz 1971061 10153145204760484 336557482 n" src="/system/images/images/000/000/004/thumb/rsz_1971061_10153145204760484_336557482_n.jpg?1377656209">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/5"> 
<img alt="Digital radiograph1" src="/system/images/images/000/000/005/thumb/digital_radiograph1.jpg?1377659810">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/6"> 
<img alt="Pamo" src="/system/images/images/000/000/006/thumb/pamo.jpg?1377659876">
2013-08-28
</a>            </div>
</div>
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/7"> 
<img alt="Tooth x ray 1" src="/system/images/images/000/000/007/thumb/tooth-x-ray_1.jpg?1377659952">
2013-08-28
</a>            </div>  
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/8"> 
<img alt="Fig9b" src="/system/images/images/000/000/008/thumb/fig9b.jpg?1377664192">
2013-08-28
</a></div>
</div>
</div>

<div class="col-sm-12 col-md-2"> 
<span class="glyphicon glyphicon-plus">
<a href="/images/new">Upload New Image</a>
</span>
</div>
</div>
</div>

Answer 6

I decided to use display: inline-block and manually configure the responsive columns instead of using the col-X-X class of bootstrap. I wanted 3 columns for XL screens and 2 for L, and 1 for the rest. This is the CSS I used.

.section-card-col {
  margin-bottom: 22px;
  display: inline-block;
}

@media screen and (min-width: 1200px) {
  .section-card-col {
    width: calc(33% - 16px);
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: top;
  }
}

@media screen and (min-width: 900px) and (max-width: 1199px) {
  .section-card-col {
    width: calc(50% - 16px);
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: top;
  }
}