Bootstrap grid responsive with same height only in desktop version

Question

I have this grid:

<div class="row">
    <div class="col-lg-4 col-xs-12"> ... </div>
    <div class="col-lg-4 col-xs-12"> ... </div>
    <div class="col-lg-4 col-xs-12"> ... </div>
</div>

How can I make sure that in my desktop version, the three columns have the same height, but in the mobile version, the height fits the content?

I am using a "hack" version for getting them styled in the same height, that makes the row think it is a table. It looks like that:

/* USAGE
    <div class="row">
      <div class="row-height">
        <div class="col-xs-2 col-xs-height col-xs-middle">
          <div class="inside"></div>
        </div>
        <div class="col-xs-4 col-lg-5 col-xs-height col-xs-middle">
          <div class="inside"></div>
        </div>
      </div>
    </div>
    */

    /* content styles */

    .inside {
      margin-top: 20px;
      margin-bottom: 20px;
      background: #ededed;
      background: -webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
      background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
      background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
    }
    .inside-full-height {
      /*
      // if you want to give content full height give him height: 100%;
      // with content full height you can't apply margins to the content
      // content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100
      */
      height: 100%;
      margin-top: 0;
      margin-bottom: 0;
    }

    /* columns of same height styles */

    .row-height {
      display: table;
      table-layout: fixed;
      height: 100%;
      width: 100%;
    }
    .col-height {
      display: table-cell;
      float: none;
      height: 100%;
    }
    .col-top {
      vertical-align: top;
    }
    .col-middle {
      vertical-align: middle;
    }
    .col-bottom {
      vertical-align: bottom;
    }

    @media (min-width: 480px) {
      .row-xs-height {
        display: table;
        table-layout: fixed;
        height: 100%;
        width: 100%;
      }
      .col-xs-height {
        display: table-cell;
        float: none;
        height: 100%;
      }
      .col-xs-top {
        vertical-align: top;
      }
      .col-xs-middle {
        vertical-align: middle;
      }
      .col-xs-bottom {
        vertical-align: bottom;
      }
    }

    @media (min-width: 768px) {
      .row-sm-height {
        display: table;
        table-layout: fixed;
        height: 100%;
        width: 100%;
      }
      .col-sm-height {
        display: table-cell;
        float: none;
        height: 100%;
      }
      .col-sm-top {
        vertical-align: top;
      }
      .col-sm-middle {
        vertical-align: middle;
      }
      .col-sm-bottom {
        vertical-align: bottom;
      }
    }

    @media (min-width: 992px) {
      .row-md-height {
        display: table;
        table-layout: fixed;
        height: 100%;
        width: 100%;
      }
      .col-md-height {
        display: table-cell;
        float: none;
        height: 100%;
      }
      .col-md-top {
        vertical-align: top;
      }
      .col-md-middle {
        vertical-align: middle;
      }
      .col-md-bottom {
        vertical-align: bottom;
      }
    }

    @media (min-width: 1200px) {
      .row-lg-height {
        display: table;
        table-layout: fixed;
        height: 100%;
        width: 100%;
      }
      .col-lg-height {
        display: table-cell;
        float: none;
        height: 100%;
      }
      .col-lg-top {
        vertical-align: top;
      }
      .col-lg-middle {
        vertical-align: middle;
      }
      .col-lg-bottom {
        vertical-align: bottom;
      }
    }

The problem is I don't know how to use this only for desktop. Of course I could do hidden-xs and hidden-lg and just duplicate the html, but I don't consider that nice.

Can't you just remove the CSS you added for making them the same height from everywhere except the media queries above 768px? You're explicitly telling rows to act like table cells all the time. — BSMP, Nov 11 '16 at 17:42
I use the "same column height" in the mobile view in one place. So I just want to know how I can disable that for certain places, not all. — molerat, Nov 11 '16 at 17:45
Media query was a good one but "vh" is not supported enough yet. Thanks. — molerat, Nov 12 '16 at 15:00

score 1 · Accepted Answer · answered Nov 12 '16 at 15:02

In addition to the code in the question, I just added following media query:

@media (max-width: 768px) {     
    .col-height.var-height-mobile{
      display:block;
      height: auto;
    }
  }

And then for elements that should not have the same-height effect in the mobile version, you just have to add the class var-height-mobile to them.

Bootstrap grid responsive with same height only in desktop version

1 Answers1