Equal height for bootstrap columns not working - html

Question

I'm looking at the solution here on SO to set all columns in a bootstrap row to equal heights. It works fine in my fiddle, but in my browser with all other css the '.thumbnail.row.equalColumnHeight' css is not being used. There are black lines through it. I'm kinda a newbie to css, is there a way to override these black lines and get it to use the css for this class?
Here is what it looks like in Chrome dev tools.
here is the row in the browser - not equal heights.
Here is the code in fiddle where it shows unequal heights.
Here is the code.
html,
body,
.container-fluid,
.row {
height: 100%;
}
.row > div {
height: 100%;
}
.row .col-md-5 {
background-color: #eee;
top: 51px;
/*border: 1px solid black;*/
height: calc(100% - 51px);
padding-left: 0;
padding-right: 0;
}
.row .col-md-7 {
background-color: #ddd;
top: 51px;
/*border: 1px solid black;*/
height: calc(100% - 51px);
padding-left: 0;
padding-right: 0;
}
#googleResultMap {
width: 100%;
height: 100%;
/*border: 1px solid black;*/
}
.searchFilter {
/*width:200px;*/
height: 15%;
/*border: 1px solid blue;*/
}
.searchResults {
height: 85%;
border: 1px solid green;
overflow-y: scroll
}
input[readonly].default-cursor {
cursor: default;
background-color: white;
}
.date-field {
width: 120px;
}
##media only screen and (max-width:768px) {
/* only size 'xs' and below */
.searchResults {
height: 100%;
}
}
.thumbnail .col-lg-3 {
border: 1px solid red;
}
.searchResults {
height: 85%;
border: 1px solid green;
overflow-y: scroll
}
.thumbnail.row {
height: auto;
}
.cborder {
border: 1px solid pink;
}
.imageColumn {
padding-right: 0;
padding-left: 0;
}
.thumbnail.row.equalColumnHeight {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5 hidden-xs">
#*Sidebar*#
<div id="googleResultMap"></div>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
#*Body content*#
<div class="searchFilter col-lg-12 col-md-12 col-sm-12 hidden-xs">
#Html.TextBoxFor(model => model.ClassDate, "{0:MM/dd/yyyy}", new { #class = "date-field form-control default-cursor", #readonly = "readonly" }) #Html.Hidden("classTime")
<br/>Time Filter
<br/>Open Classes Only
</div>
#*
<div class="searchResults col-lg-12 col-xs-12 col-sm-12">*#
<div class="searchResults col-lg-12 col-xs-12 col-sm-12">
<div class="thumbnail row equalColumnHeight">
<div class="col-lg-3 col-xs-3 imageColumn">
#*
<h3>Thumbnail label</h3>
<p>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link
</a>Test Data
</p>*#
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" class="img-responsive center-block" alt="Responsive image" style="width: 100%; border: 1px solid purple;">
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" class="img-responsive center-block" alt="Responsive image" style="width: 100%; border: 1px solid purple;">
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" class="img-responsive center-block" alt="Responsive image" style="width: 100%; border: 1px solid purple;">
</div>
<div class="col-lg-3 col-xs-3" style="text-align: center;">
#*
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>*#
<i class="fa fa-users fa-5x" style="margin: auto;"></i>
</div>
<div class="col-lg-3 col-xs-3" style="text-align: center;">
#*
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>*#
<i class="fa fa-user fa-5x" style="margin: auto;"></i>
</div>
<div class="col-lg-3 col-xs-3">
#*
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>*#
</div>
<div class="collapse cborder" id="collapseExample">
<div class="well">
test data
<br />test data
<br />test data
<br />
</div>
</div>
</div>
</div>
#*</div>*#
</div>
</div>
</div>

Answer 1

To do same height columns in Bootstrap you need follow this answer. Simply add this code to your CSS:
.row [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row{
overflow: hidden;
}