Same height column bootstrap 3 row responsive

Question

Hi I have four divs in a bootstrap row. I want all divs in this row to have the same height and not break responsibility. I don\'t know how to do this without breaking respo

Answer 1

We can achieve this by -

1. By using table layout mechanism
2. Using jquery-match-height js plugin

1. By using table layout mechanism

Demo - JS Fiddle

The mechanism is -

1. Wrap all columns in one div
2. Make that div as a Table with fixed layout
3. Make each column as a table cell
4. Use vertical-align property to control content position

We can make columns of same height and vertically aligned using following css and classes.

Base css will be-

  /* columns of same height styles */

.row-full-height {
  height: 100%;
}

.col-full-height {
  height: 100%;
  vertical-align: middle;
}

.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}

.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}

@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}


/* vertical alignment styles */

.col-top {
  vertical-align: top;
}

.col-middle {
  vertical-align: middle;
}

.col-bottom {
  vertical-align: bottom;
}

Base html will be-

<div class="container">
  <h2>Demo 1</h2>
  <div class="row">
    <div class="row-same-height">
      <div class="col-xs-3 col-sm-height">1st column</div>
      <div class="col-xs-3 col-sm-height col-top">2st column</div>
      <div class="col-xs-3 col-sm-height col-middle">3st column</div>
      <div class="col-xs-3 col-sm-height col-bottom">4th column</div>
    </div>
  </div>
</div>

2. Match Media Js

MatchHeight makes the height of all selected elements exactly equal. It handles many edge cases that cause similar plugins to fail.

Demo link - here

Answer 2

To make the website responsive you should specify the width in % and to display 4 divs with same height and specify height

.col-md-3 {
    width:25%;
    height:250px;
}

.row {
    width:100%;
}

Answer 3

There was at one point an official experimental example of same-height columns using CSS flexbox with Bootstrap. Here's the gist of it:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

And then use <div class="row row-eq-height"> instead of <div class="row">.

Note that flexbox isn't supported in IE<10.

Answer 4

EDIT 1 : I had to help someone with that so i made a plunkr. Go to "script.js" and comment "bootstrap_equalizer();" function to see original bootstrap, without same height columns.

I know this is a bit late but i'm sure that could improve your code and help some others ! :)

As i'm used to work with Foundation 5, when i have to work with bootstrap i miss the "equalizer".

I make a little function to call on pages where you have to "Equalize" some columns. My code is based on @paulalexandru response !

function bootstrap_equalizer() {
  $(".equalizer").each(function() {
    var heights = $(this).find(".watch").map(function() {
      return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".watch").height(maxHeight);
  });
}

On html side, you just need to do this :

<div class="container">
   <div class="row equalizer">
      <div class="watch">
         Column 1
      </div>

      <div class="watch">
         Column 2
      </div>
   </div>
</div>

column 1 & column 2 will have same height ! You can of course have more than 2 columns !

Hope this can help ! =)

Answer 5

If anybody is interested in a pure CSS solution that doesn't break the responsiveness, this worked for me (note that I added the class "row-eq-height" where the "row" class is to clarify and not interfere with bootstrap css and changed 'md' for 'xs' to check it better in the demo).

<div class="row row-eq-height">
<div class="col-xs-3 index_div_item">
    <a href="#">
    <div class="well" id="item1">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
    </div>
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item2">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>  
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item3">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>
    </a> 
</div>  
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item4">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>  
    </a>  
</div>              

css:

    .row-eq-height{
    overflow: hidden; 
}

.row-eq-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

You can check a demo here.

Answer 6

For people who are coming here for this solution in React, here it is:

  constructor(props) {
    super(props);
    this.state = {
      maxHeight: undefined,
    };

    this.putBootstrapColumnSameHeight = this.putBootstrapColumnSameHeight.bind(this);
  }

  componentDidMount() {
    this.putBootstrapColumnSameHeight();
  }

  putBootstrapColumnSameHeight() {
    const heights = [];
    document.querySelectorAll('.col').forEach(el => heights.push(el.clientHeight));
    this.setState(
      {
        maxHeight: Math.max.apply(null, heights),
      },
    );
  }

Then to your columns :

<Col xs={12} md={7} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

<Col xs={12} md={5} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

Enjoy ;)