CODEWITHSUNDEEP
csstwitter-bootstrapflexbox
Mussy
Mussy

Reputation: 11

Equal height panels in Bootstrap over multiple rows

new to Bootstrap 4 after years using Foundation.

In Foundation, equalizer was used to match the height of divs, and this height would be applied to each div within the container. I know Bootstrap uses Flex but can't fathom out how to make all panels the same height. h-100 only matches the height of the boxes in that particular row. I need all boxes to take the height of the longest box, regardless of the row it gets rendered on.

E.g. in this example, all the boxes need to be the same height:

bootstrap h-100 divs

<div class="container">
    <div class="row">

        [LOOP STARTS]

            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">  
                <a href="#">
                    <div class="panel-link h-100">

                        <i class="fas fa-link"></i> LINK TEXT HERE

                    </div>
                </a>
            </div>

        [LOOP ENDS]

    </div>
</div>

Upvotes: 1

Views: 824

Answers (1)

Martin Eve
Martin Eve

Reputation: 2751

There is no way to do this by default in bootstrap. However, you can use javascript to achieve the result you want.

Here's a jQuery example:

$( document ).ready(function() {
   var max_height = 0
   $('.row-eq-height').each(function( index, element ){
      height = ( $( this ).height() );
      if (height > max_height) {
        max_height = height;
      }
  });

   $('.row-eq-height').height(max_height);
});

This will apply equal column heights across the whole page to any element with the class "row-eq-height".

Upvotes: 1

Related Questions