8/25/2018 - 2:06 AM

Bootstrap Carousel with Normalized height

In working on a Bootstrap-based client project, they needed the heights of all the items to be the same height, even though the content was of different heights.

Bootstrap uses position:absolute to move the items. As such, techniques like flex and grid aren’t of much help here.

function normalizeSlideHeights() {
      var items = $('.carousel-item', this);
      // reset the height
      items.css('min-height', 0);
      // set the height
      var maxHeight = Math.max.apply(null, 
              return $(this).outerHeight()}).get() );
      items.css('min-height', maxHeight + 'px');

    'load resize orientationchange',