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() {
$('.carousel').each(function(){
var items = $('.carousel-item', this);
// reset the height
items.css('min-height', 0);
// set the height
var maxHeight = Math.max.apply(null,
items.map(function(){
return $(this).outerHeight()}).get() );
items.css('min-height', maxHeight + 'px');
})
}
$(window).on(
'load resize orientationchange',
normalizeSlideHeights);