Same height for thumbnail columns in Bootstrap 3

Question

I've been reading lot of answers on how to have same height columns within the same row, but none seems to work in my case. I know the solution is probably something really dumb, but I cannot figure it out... So, first I created a style.css and imported it in my index.php this way (I also include the other style reference I am actually using and the important part of the code below):

index.php

<link rel="stylesheet" href="./static/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
...
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
        <img src="./img/animazione.jpg" alt="Animazione" style="width:100%">
        <div class="caption">
          <h2>Some text COL2</h2>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <img src="./img/rinnovabili.jpg" alt="Rinnovabili" style="width:100%">
        <div class="caption">
          <h2>Some text COL2</h2>
        </div>
     </div>
   </div>
   <div class="col-md-4">
      <div class="thumbnail">
        <img src="./img/rugby.jpg" alt="Rugby" style="width:100%">
        <div class="caption">
          <h2>Some text COL3</h2>
       </div>
      </div>
    </div>
  </div>

My style.css is like (as proposed here):

style.css

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

After that, I tried to replace <div class="row"> with <div class="row equal"> but nothing happened: the columns are still each a different height. I also tried to set the first row of my style.css to .row.equal{ but still with no luck.

I am using FireFox ver. 53. When i open the Developer Tools, I can see that display: flex; in my css is ignored (it's ruled out). I guess it is something related to flexbox, but I am a novice and I really don't know how to solve this problem.

I also created a bootply as suggested. Hope it will help understanding my point.

Here it is (first time, hope it works). https://www.bootply.com/axLGNXY9yI#. Also added in the question. — umbe1987, May 29 '17 at 22:26

score 1 · Answer 1 · answered May 29 '17 at 22:46

I guess the flex property was getting overriding by the bootstrap classes and can be resolved by '!important' in your custom css.

.target-class{
   display: flex !important;
}

But you can simplify the code by removing the predefined thumbnail class and styling it in your own way. Display your parent class as flex and align your children as 'stretch' (will give the height equal to the height of the parent div).

.parent {
  background: lightgrey;
  display: flex;
}

.child {
  align-items: stretch;
  flex: 1;
  background: #fff;
  margin: 10px;
  padding-top: 10px;
}

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

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="parent">

        <div class="col-xs-4 child">

          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">

          <div class="caption">
            <h2>Some text COL2 some text</h2>
          </div>

        </div>

        <div class="col-xs-4 child">

          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">

          <div class="caption">
            <h2>Some text COL2 some more text</h2>
          </div>

        </div>

        <div class="col-xs-4 child">

          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">

          <div class="caption">
            <h2>Some text COL3</h2>
          </div>

        </div>

      </div>
    </div>
  </div>
</div>

score 1 · Accepted Answer · answered May 30 '17 at 02:19

The columns are equal height, but the thumbnails inside the columns are not filling the height. Just set the height...

.row.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  height: 100%;
}

.thumbnail {
  height: 100%;
}

https://www.bootply.com/8wQiUUKL53

Same height for thumbnail columns in Bootstrap 3

2 Answers2