Equal height for bootstrap columns not working

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>

please read my post, my fiddle works fine, it's when I use it with all other css and code from the project that the css gets overriden some how and I'm not sure how to fix it. — chuckd, Sep 04 '15 at 21:17
yep, sorry. you can insert your css, in `style` tag in `head`. And it should work fine — AleshaOleg, Sep 04 '15 at 21:21
or, you can just overwrite your styles in `style` attribute of tags — AleshaOleg, Sep 04 '15 at 21:25

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

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; 
}

edited May 23 '17 at 12:16

Community

1
1

answered Sep 04 '15 at 21:24

AleshaOleg

2,171
1
15
29

adding it inline with the element also gets overriden. – chuckd Sep 04 '15 at 21:29
@user1186050 no, i need whole code from to – AleshaOleg Sep 04 '15 at 21:57
1. I can't remove the css you ask me to remove, it will affect other parts of the page. 2. Your solution doesn't work. I just looked at it. – chuckd Sep 04 '15 at 22:15
@user1186050 are u kidding? uncomment first three lines and look for result – AleshaOleg Sep 04 '15 at 22:16
@user1186050 why it did not immediately say, you give me this peace of code and by logic I can do everything with this to get you result – AleshaOleg Sep 04 '15 at 22:17
please look at your fiddle example jsfiddle.net/9ndyzzaf/8 . it doesn't solve the problem I'm having. The columns in your solution are still unequal in height and as I said in a previous comment I cann't remove the lines of code you request because it will affect the rest of the page layout. – chuckd Sep 04 '15 at 22:22
@ok, you sad that your code working but, you don't know why classes overrides. Which classes you want to make working? – AleshaOleg Sep 04 '15 at 22:26
.thumbnail.row.equalColumnHeight { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }. Please look at my original pic in my post. All lines in this css are being crossed out except the last line – chuckd Sep 04 '15 at 22:27
@user1186050 that simple. You last display is `flex` when you uncheck it, the next will be `-webkit-flex` and then when you uncheck this it will be `-webkit-box`. But no one don't make any result yo your columns – AleshaOleg Sep 04 '15 at 22:30
I tried checking and unchecking these values with no luck – chuckd Sep 04 '15 at 22:32
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/88846/discussion-between-aleshaoleg-and-user1186050). – AleshaOleg Sep 04 '15 at 22:32

Equal height for bootstrap columns not working

1 Answers1