Bootstrap 3 list of divs with images

Question

I'm using bootstrap3 and trying to create list of images with caption. The data is dynamic so i can't tell the size of the caption. I want each row of list to adjust his neighbour caption height

Answer 1

The easiest and legacy browser compatible way, I would address this is using jQuery to match the height of the caption per row using http://brm.io/jquery-match-height/.

Another option is to use FlexBox: http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback.

If all of your thumbs/captions are in the same row, then it will be all the same based on the tallest, so split out every 4 by row, see the docs for GetBootstrap.com on how to use the grid system.

Look carefully at the CSS. In the future, make a Fiddle, Bootply, or JSBin with placeholder images.

DEMO: http://jsbin.com/pilid/1

DEMO with edit: http://jsbin.com/pilid/1/edit

jQuery

/* __________________ RESPONSIVE EQUAL HEIGHTS __________________*/
/*! jquery.matchHeight-min.js v0.5.1   |   http://brm.io/jquery-match-height/   |   License: MIT  */

(function(a){a.fn.matchHeight=function(b){if("remove"===b){var f=this;this.css("height","");a.each(a.fn.matchHeight._groups,function(g,h){h.elements=h.elements.not(f)});return this}if(1>=this.length){return this}b="undefined"!==typeof b?b:!0;a.fn.matchHeight._groups.push({elements:this,byRow:b});a.fn.matchHeight._apply(this,b);return this};a.fn.matchHeight._apply=function(b,g){var h=a(b),f=[h];g&&(h.css({display:"block","padding-top":"0","padding-bottom":"0","border-top":"0","border-bottom":"0",height:"100px"}),f=c(h),h.css({display:"","padding-top":"","padding-bottom":"","border-top":"","border-bottom":"",height:""}));a.each(f,function(i,l){var k=a(l),j=0;k.each(function(){var m=a(this);m.css({display:"block",height:""});m.outerHeight(!1)>j&&(j=m.outerHeight(!1));m.css({display:""})});k.each(function(){var m=a(this),n=0;"border-box"!==m.css("box-sizing")&&(n+=e(m.css("border-top-width"))+e(m.css("border-bottom-width")),n+=e(m.css("padding-top"))+e(m.css("padding-bottom")));m.css("height",j-n)})});return this};a.fn.matchHeight._applyDataApi=function(){var b={};a("[data-match-height], [data-mh]").each(function(){var f=a(this),g=f.attr("data-match-height");b[g]=g in b?b[g].add(f):f});a.each(b,function(){this.matchHeight(!0)})};a.fn.matchHeight._groups=[];var d=-1;a.fn.matchHeight._update=function(b){if(b&&"resize"===b.type){b=a(window).width();if(b===d){return}d=b}a.each(a.fn.matchHeight._groups,function(){a.fn.matchHeight._apply(this.elements,this.byRow)})};a(a.fn.matchHeight._applyDataApi);a(window).bind("load resize orientationchange",a.fn.matchHeight._update);var c=function(b){var f=null,g=[];a(b).each(function(){var i=a(this),k=i.offset().top-e(i.css("margin-top")),j=0<g.length?g[g.length-1]:null;null===j?g.push(i):1>=Math.floor(Math.abs(f-k))?g[g.length-1]=j.add(i):g.push(i);f=k});return g},e=function(b){return parseFloat(b)||0}})(jQuery);


$(document).ready(function () {


    /* ----------  equal height columns   -------- */
    $('.caption').matchHeight();



}); // end document ready

CSS

.thumb-box {
    background: #000;
    padding: 3px;
    margin: 10px 0;
}

.caption {
    position: relative;
    padding: 5px;
    text-align: center;
    color: #fff;
}

.thumb-box img {
    width: 100%;
    height:auto;
}

/* center caption vertically except on < ie8 */
.caption p {
    position: relative;
    top: 50%;
    top:0%\9; /*ie8*/
    transform: translateY(-50%);
}

/**/
@media (max-width:767px) {
  .thumb-row {margin-left:-2%;margin-right:-2%;}
  .thumb-row [class*=col-] {padding-left:2%;padding-right:2%;}

}

HTML

<div class="container">

 <h1>Uses jQuery to make the captions equal per row</h1>
  <p>This turns in to 2 columns on the xs breakpoint.</p>

 <div class="row thumb-row">
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption. Longer Caption</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
 </div>
 <!--/.row -->

 <div class="row thumb-row">
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption. Much longer caption tha the other caption.</p>
    </div>
   </div>
  </div>
 </div>
 <!--/.row -->

  <hr>

    <h1>Uses jQuery to make the captions equal per row</h1>
  <p>This stacks on small viewports less than 767px.</p>

 <div class="row">
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption. Longer Caption</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
 </div>
 <!--/.row -->

 <div class="row">
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption. Much longer caption tha the other caption.</p>
    </div>
   </div>
  </div>
 </div>
 <!--/.row -->



</div>
<!--/.container -->

Answer 2

The background-color black is a problem. You can use table-cell and use background:black

Or you can modify your html structure

*{margin:0;padding:0}
.bloc {
  width:250px; 
  display:table-cell;
  border:10px solid white;
  border-bottom:0;
}

.legende{
  background:black;
  color:white;
  width:250px;
  display:table-cell; 
  border:10px solid white;
  border-top:0
}

.line{
  margin-bottom:-5px;
}