Set Sibling Elements To The Same Height - jQuery equal-height.js

An ultra-light (1kb minified) jQuery equal height plugin for modern web layout design that can be used to make all columns equal in height per row. Works with both responsive & fluid layouts (e.g. Bootstrap layout).

How to use it:

1. Make sure the columns have the same CSS class as these:

<div class="row">

  <div class="col-md-4 col-sm-6 jQueryEqualHeight1">
      <div class="card">
          <img class="card-img-top" src="http://via.placeholder.com/318x180" alt="Card image cap">
          <div class="card-body">
              <h4 class="card-title">Card title</h4>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
      </div>
  </div>

  <div class="col-md-4 col-sm-6 jQueryEqualHeight1">
      <div class="card">
          <img class="card-img-top" src="http://via.placeholder.com/318x180" alt="Card image cap">
          <div class="card-body">
              <h4 class="card-title">Card title</h4>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
      </div>
  </div>

  <div class="col-md-4 col-sm-6 jQueryEqualHeight1">
      <div class="card">
          <img class="card-img-top" src="http://via.placeholder.com/318x180" alt="Card image cap">
          <div class="card-body">
              <h4 class="card-title">Card title Card title Card title Card title Card title Card title</h4>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
      </div>
  </div>

</div>

2. Download and include the jQuery equal-height.js script after jQuery JavaScript library.

<!-- Loading jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>

<!-- Loading jQuery Equal Height -->
<script type="text/javascript" src="js/jquery-equal-height.min.js"></script>

3. Initialize the plugin.

$(window).on('load', function(event) {
  $('.jQueryEqualHeight-demo').jQueryEqualHeight();
});

4. Re-initialize the plugin on window resize.

$(window).on('resize', function(event) {
  $('.jQueryEqualHeight-demo').jQueryEqualHeight();
});

Changelog:

v1.0.4 (2018-06-26)

• Bugfix

---

This awesome jQuery plugin is developed by susonwaiba. For more Advanced Usages, please check the demo page or visit the official website.