Bootstrap thumbnails+caption with same height per row?

Question

There are related questions here or here, although none seemed to work for me.

I've followed the Bootstrap example to implement thumbnails with captions. However, my caption texts are of different lengths causing different heights for the three thumbnails. That looks rather ugly. To fix this I've tried the matchHeight jQuery plugin, but that didn't have an effect.

This is my code:

<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
  <script src="js/jquery.matchHeight-min.js" type="text/javascript"></script> 
  <script type="text/javascript">                                             
    $(".thumbnail").matchHeight({ byRow: true, });                            
  </script>                                                                   
</head>                                                                       
<body>                                                                        
  ...
  <div class="row">                                                       
    <div class="col-lg-4 col-md-4 col-xs-12">                             
      <div class="thumbnail">                                             
        <img class="img-responsive" src="img/img-1.jpg" alt="">      
        <div class="caption">                                             
          <h4>Heading 1</h4>                                                 
          <p>...</p>
        </div>                                                            
      </div>                                                              
    </div>                                                                
    <div class="col-lg-4 col-md-4 col-xs-12">                             
      <div class="thumbnail">                                             
        <img class="img-responsive" src="img/img-2.jpg" alt="">      
        <div class="caption">                                             
          <h4>Heading 2</h4>                                                 
          <p>...</p>
        </div>                                                            
      </div>                                                              
    </div>                                                                
    <div class="col-lg-4 col-md-4 col-xs-12">                             
      <div class="thumbnail">                                             
        <img class="img-responsive" src="img/img-3.jpg" alt="">      
        <div class="caption">                                             
          <h4>Heading 3</h4>                                                 
          <p>...</p>
        </div>                                                            
      </div>                                                              
    </div>                                                                
  </div>                                                                  
  ...
</body>

What am I missing here? How can I get these three thumbnail to align nicely?

Pindakaas · Answer 1 · 2015-05-14T00:47:26.127

1

Try this for js:

(function() {
      $(function() {
            $('.thumbnail').matchHeight({
                    byRow: true,
                    property: 'height',
                    target: null,
                    remove: false
            });
      });
 })();

Demo: http://plnkr.co/edit/WZsXno08rc9rv3lZfODW?p=preview

edited May 14 '15 at 00:47

answered May 13 '15 at 07:06

Pindakaas

4,389
16
48
83

Oddly enough, this gives me a `matchHeight is not a function` error. Your link works though ... – Jens May 13 '15 at 14:22
It means that the reference to the matchheightAPI is not correct. Try to replace with my reference from the demo . It should work then. – Pindakaas May 14 '15 at 00:49
What's the difference other than the `src`, fetching local vs. remote? – Jens May 17 '15 at 08:49

score 1 · Answer 2 · answered May 13 '15 at 10:11

.thumbnail {
  height: 547px;
  overflow-y: hidden;
}
.img-responsive {
  margin-bottom: 30px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-lg-4 col-md-4 col-xs-12">
    <div class="thumbnail">
      <img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
      <div class="caption">
        <h4>Heading 1</h4> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit maximus nulla id eleifend. Curabitur sit amet tellus vitae orci condimentum aliquam. Aenean facilisis lacinia suscipit. Cras quam massa, pharetra a convallis nec,
          gravida eu metus. Phasellus gravida faucibus nulla, sit amet suscipit purus. Donec luctus, ligula sed finibus congue, libero odio ultricies nulla, a pharetra diam mauris non turpis. Phasellus a aliquet lorem.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-xs-12">
    <div class="thumbnail">
      <img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
      <div class="caption">
        <h4>Heading 2</h4> 
        <p>Nullam pulvinar posuere arcu ac mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis in interdum leo. Nunc sed purus vel eros mollis pharetra sit amet sit amet felis. Ut pharetra mi ac dolor
          dignissim facilisis. Phasellus odio massa, pulvinar sed velit ac, malesuada posuere urna. Aliquam urna eros, sollicitudin et diam quis, lacinia feugiat erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          Aenean porttitor, tortor sit amet accumsan placerat, ante augue pretium nunc, vel volutpat turpis ex vitae dui. Etiam imperdiet turpis sed ante posuere, venenatis lobortis lorem pharetra.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-xs-12">
    <div class="thumbnail">
      <img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
      <div class="caption">
        <h4>Heading 3</h4> 
        <p>Quisque mollis sollicitudin tellus, in sagittis diam rutrum ut. Mauris ex arcu, vehicula et ullamcorper id, viverra vel nibh. Ut vestibulum tellus vel erat lobortis, quis fringilla nulla semper. Proin a varius tortor, ac varius tortor. Sed fringilla
          dignissim neque cursus sit amet. Maecenas molestie hendrerit orci, ut faucibus mauris tempor in.</p>
      </div>
    </div>
  </div>
</div>

score 1 · Accepted Answer · edited May 23 '17 at 11:51

I ended up using a neat trick from this answer, and writing my own code. The #mq-detector element tells me when media queries switch without me having to hard-code viewport widths. Then I hooked into the window's resize callback to know when the user changes the size of the browser window:

<script type="text/javascript">                                             
  (function() {                                                             
    $(window).resize(checkAdjustThumbnailHeight);                   
    $(document).ready(checkAdjustThumbnailHeight);                          
  })();
</script>

The checkAdjustThumbnailHeight function is called the first time when the page is rendered, and every time the browser's resize event fires. That function checks the media detector element and adjusts the thumbnail heights accordingly:

function checkAdjustThumbnailHeight() {                                 
  if ($("#mq-detector > span.visible-lg").is(":visible")) {          
    adjustThumbnailHeight();                                            
  }                                                                     
  else if ($("#mq-detector > span.visible-md").is(":visible")) {     
    adjustThumbnailHeight();                                            
  }                                                                     
  else if ($("#mq-detector > span.visible-sm").is(":visible")) {     
    inheritThumbailHeight();                                            
  }                                                                     
  else if ($("#mq-detector > span.visible-xs").is(":visible")) {     
    inheritThumbailHeight();                                            
  }                                                                     
  else { }                                                              
}

Note that for sm and xs (actual pixel values see here) sizes I do not modify the thumbnail height because in those cases the thumbnails are rendered one above the other, not next to each other. For md and lg sizes, I set the thumbnail heights to the largest one:

function adjustThumbnailHeight() {                                      
  var heights = [ ];                                                    
  $(".thumbnail").each(function() {                                  
    heights.push( $(this).height() );                                   
  });                                                                   
  var max = Math.max.apply(null, heights);                              
  $(".thumbnail").each(function() {                                  
    $(this).height(max);                                                
  });                                                                   
}                                                                       
function inheritThumbailHeight() {                                      
  $(".thumbnail").each(function() {                                     
    $(this).css("height", "inherit");                                   
  });                                                                   
}

This seems to work fine.

ADDENDUM Because some images may take more time to finish loading, the height of the thumbnails can be skewed. Therefore I used the imageLoaded plugin to defer adjusting the thumbnails heights until all images have finished loading.

I'm glad you have used my answer to resolve your problem! Please, note that using `var mqDetector = $("#mq-detector"); var mqSelectors = [ mqDetector.find(".visible-xs"), mqDetector.find(".visible-sm"), mqDetector.find(".visible-md"), mqDetector.find(".visible-lg") ];` instead of manually selecting everytime with `$("#mq-detector > span.visible-**")` would increase the performance, considering that `resize` might trigger a lot. Furthermore, you could use `||` (the *or* operator) to have `lg` and `md`, and `sm` and `xs` on the same statement, since you handle these equally. — falsarella, May 13 '15 at 18:27

Bootstrap thumbnails+caption with same height per row?

3 Answers3

Linked