CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Michael
Michael

Reputation: 538

Bootstrap: How to make columns equal height / dynamic amount of columns per row depending on device size

I have taken this code basically from the Purity III joomla template:

<div class="container">
<div class="col-sm-6 col-md-4">
<div class="thumbnail"><img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"><img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"><img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"><img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"><img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"><img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p></p>
</div>
</div>
</div>
</div>

This works as it should: Three colums per row on a normal device (http://www.bootply.com/SN4RsM0gtI) enter image description here and two columns on a smaller screen.

The problem stars when one DIV is higher than the others (http://www.bootply.com/lRDhpndazO): enter image description here I could wrap three divs within a "row"-class , then it works on a normal screen, but on smaller device the second row will contain only one column.

Any idea how to go on?

Upvotes: 2

Views: 1436

Answers (2)

kukkuz
kukkuz

Reputation: 42370

Used a flexbox for the container and edited the html a bit. Hope this works for you, please give me your feedback. Thanks!

snippet below:

.container {
  display: flex;
  flex-wrap: wrap;
}
.container .thumbnail {
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="col-sm-6 col-md-4 thumbnail">
    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
    <div class="caption">
      <h3>Sean Thomas</h3>
      <p>Senior Designer</p>
      <p></p>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 thumbnail">
    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
    <div class="caption">
      <h3>Sean Thomas</h3>
      <p>Senior Designer</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 thumbnail">
    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
    <div class="caption">
      <h3>Sean Thomas</h3>
      <p>Senior Designer</p>
      <p></p>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 thumbnail">
    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
    <div class="caption">
      <h3>Sean Thomas</h3>
      <p>Senior Designer</p>
      <p></p>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 thumbnail">
    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
    <div class="caption">
      <h3>Sean Thomas</h3>
      <p>Senior Designer</p>
      <p></p>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 thumbnail">
    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
    <div class="caption">
      <h3>Sean Thomas</h3>
      <p>Senior Designer</p>
      <p></p>
    </div>
  </div>
</div>

Upvotes: 4

delx
delx

Reputation: 404

One JS solution is to get the max height of the thumbnail containers and then set this max height to all thumbnail containers. The following snippet requires jQuery.

<script>
var maxHeight = 0;
$('.thumbnail').each(function () {
  var height = $(this).height();
  if (height > maxHeight){
     maxHeight = height;
  }
});
$('.thumbnail').height(maxHeight);
</script>

Upvotes: 0

Related Questions