Bootstrap thumbnail width does not start a new line correctly

Question

I have a thumbnail grid in my rails application, but I'm having trouble loading the bootstrap to display the grid correctly! As you can see below, however, it does not start a new line correctly! not sure what to do here. I have included my HTML below, and as I understand it, it follows 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

This is a problem with height.

I am solving the same thing right now, and you basically have two options if you want to spoil the extra row containers and have a whole bunch of columns in one row in response:

• you can make sure that all elements in your grid have the same height by restricting the css content (or just by controlling the content that falls into each element).

• You can add a small jQuery code to your page to scan sketch elements and expand their containers to the same height as the largest element in the grid. Google around for equal heights of jQuery plugins - there is a bunch. Another thing you'll need to ensure that you do this is to re-enable the plugin when resizing, as this may cause your elements to assemble again at different heights due to the flexible behavior allowing the content to expand / shrink. The combination of bootstrap col classes and a bit of jQuery height alignment works pretty well for me.

Answer 2

I had a similar problem. I fixed this script pretty quickly and painlessly:

 <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' with '# image-grid' and add a class for each div element.

Answer 3

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

A row with colms col-md-2 classes 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 4

I am having a problem using images of different sizes in a thumbnail div using the Bootstrap3 frame. This led to the rupture of rows and grids depending on the size of the images. My job was to use a great little jquery plugin called "equalize" and named it in the "row" class.

This worked perfectly, you should try.

Answer 5

I decided to use display: inline-block and manually set up responsive columns instead of using the col-XX bootstrap class. I wanted 3 columns for XL screens and 2 for L, and 1 for the rest. This is the CSS that 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; } } 

Answer 6

This will solve your problem.

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