Equalize Height Of An Element's Children - jQuery Align

Align.js is a small, easy-to-use jQuery equal height plugin that allows dynamically set sibling elements to the same height no matter how you resize the browser window.

How to use it:

1. Assume that you have an element containing a group of child elements with different heights.

<div class="row">
  <div class="well col-sm-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae dignissim risus. Praesent nec malesuada nibh. Aliquam ante nulla, pellentesque bibendum tincidunt vel, faucibus pulvinar felis.
  </div>
  <div class="well col-sm-3">
    Duis molestie iaculis cursus. Fusce pharetra nulla nec nulla porttitor, sit amet convallis tellus dapibus. Donec dolor nunc, ornare eget facilisis rhoncus, elementum ac eros. Cras non velit elementum sem faucibus hendrerit sit amet sit amet libero. Donec non varius magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>
  <div class="well col-sm-3">
    Aenean tempor tortor purus, non sollicitudin quam porttitor condimentum. Suspendisse ultricies ex et ligula rutrum sollicitudin. Suspendisse velit urna, ultrices id leo sed, finibus ultricies massa. Fusce posuere, ex volutpat suscipit venenatis, mi nulla venenatis magna, vitae efficitur diam lacus id nunc. Aenean quis mollis dui. Integer et hendrerit tellus, sit amet lacinia metus. Donec faucibus lacinia arcu, eget dignissim odio semper posuere. Donec iaculis in metus non consequat.
  </div>
</div>

2. Import jQuery library and the jQuery Align plugin's script into the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/align.min.js"></script>

3. Just call the function on the top container and the plugin will do the rest.

$('.row').align();

4. You're also allows to specify the selector to be affected by the plugin.

$('.row').align({
  selector: '> div'
});

5. Decide whether to align content at the bottom edge.

$('.row').align({
  bottom: false
});

6. API Methods.

// reset
$('.row').align('reset');

// update
$('.row').align('update');

Changelog:

2020-07-07

• Add option to align at bottom edge.

2018-06-19

• Add option to align at bottom edge.
• Demo updated.

---

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