Equal height strategy for Bootstrap columns

markup.html

<div class="row equal-height">
  <div class="hidden-xs equal-height-trigger"></div>

  <div class="col-sm-6 col-md-3">
    <div class="card">
      <div class="inner">
        <header>
          <h3>Lorem</h3>
        </header>
        <p>Lorem ipsum Veniam eiusmod sunt velit deserunt ullamco cillum Duis dolore anim nulla Ut pariatur pariatur labore non esse qui proident ad.</p>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="card" data-slug="<?php echo $slug; ?>">
      <div class="inner">
        <header>
          <h3>Ipsum</h3>
        </header>
        <p>Lorem ipsum Commodo aliqua anim quis quis quis esse labore laboris consectetur qui.</p>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-md-3">
    <div class="card" data-slug="<?php echo $slug; ?>">
      <div class="inner">
        <header>
          <h3>Foo</h3>
        </header>
        <p>Lorem ipsum Est in aliquip commodo et ullamco in fugiat aute consectetur elit incididunt deserunt. Lorem ipsum Dolor consequat ea amet eiusmod.</p>
      </div>
    </div>
  </div>

</div>

scripts.js

var Main = {

  bindEqualHeight: function(){
    var self = this;
    $('.equal-height').each(function(){
      var group = $(this);
      // Run initially
      self.equalHeight(group);
      // Bound to window resize AND window load.
      // Since webfonts change the layout and they dont load
      // before DOM Ready, we run this code again on
      // window.load to ensure that the equalHeight
      // function has one its thing after WebFonts load.
      $(window).on('resize.equalheight load.equalheight', function(event){
        self.equalHeight(group);
      });
    });
  },

  equalHeight: function($container){
    var element,
    elements,
    i,
    len,
    maxHeight,
    trigger,
    paddingBottom,
    paddingTop;

    trigger = $container.find('.equal-height-trigger');
    elements = $container.children().not(trigger);

    if (trigger.is(':visible')) {
      maxHeight = 0;
      for (i = 0, len = elements.length; i < len; i++) {
        element = elements[i];
        maxHeight = Math.max($(element).find('.inner').outerHeight(), maxHeight);
      }
      elements.height(maxHeight);
    } else {
      elements.height('auto');
    }
  },

  initialize: function(){
    self.bindEqualHeight();
  }

};

// DOM Ready
$(function(){
  Main.initialize();
});