Make all boxes same height. Wordpress gridded post loop using Boostrap,

Question

I've tried solutions posted here. https://stackoverflow.com/a/19695851/7244133

And this one... https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height

None of these seem to work with the loop. Any ideas? Thanks!

 <div class="container my-container">
        <?php
        $args=array(
            'post_type' => 'post',
            'category_name' => 'Business',
            'posts_per_page' => 3
        );
        $my_query = null;
        $my_query = new WP_Query($args);

        if( $my_query->have_posts() ) {

            $i = 0;
            while ($my_query->have_posts()) : $my_query->the_post();
            // modified to work with 3 columns
            // output an open <div>
            if($i % 3 == 0) { ?> 
        <div class="row is-flex">
            <?php
            }
            ?>              
            <div class="col-md-4">
                <div class="grid-loop">
                    <div class="custom-border">
                        <a class="perm_link" href="<?php the_permalink(); ?>">
                            <h2><?php the_title(); ?></h2>
                            <div class="blog-image image-responsive"><?php the_post_thumbnail('img-251x250'); ?></div></a>
                        <p><?php the_excerpt(); ?></p>
                        <span class="shortlink">
                            <button class="btn btn-success"><?php the_shortlink("Read More"); ?></button>
                        </span>
                    </div>
                </div>
            </div>  
            <?php $i++; 
            if($i != 0 && $i % 3 == 0) { ?>
        </div><!--/.row-->
        <div class="clearfix"></div>

        <?php
            } ?>

        <?php  
            endwhile;
        }
        wp_reset_query();
        ?>
    </div><!--/.container-->

_"None of these seem to work with the loop."_ - none of those _care_ about the loop, only the resulting HTML structure. Have you verified that is as should be? — CBroe, May 25 '17 at 03:52

score 1 · Accepted Answer · answered May 25 '17 at 05:04

Using flexbox you can set equal-height columns to Bootstrap's grid system.

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

.grid-loop{
  border:1px solid #ddd;
  background-color: rgba(86,61,124,.15);
  height:100%;
  padding:10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container my-container">
<div class="row row-eq-height">
  <div class="col-sm-4">
    <div class="grid-loop">
      <div class="custom-border">
        <a class="perm_link" href="<?php the_permalink(); ?>">
          <h2>Title</h2>
          <div class="blog-image image-responsive"><?php the_post_thumbnail('img-251x250'); ?></div></a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. </p>
        <span class="shortlink">
          <button class="btn btn-success">Read More</button>
        </span>
      </div>
    </div>
  </div>
  
  <div class="col-sm-4">
    <div class="grid-loop">
      <div class="custom-border">
        <a class="perm_link" href="<?php the_permalink(); ?>">
          <h2>Title</h2>
          <div class="blog-image image-responsive"><?php the_post_thumbnail('img-251x250'); ?></div></a>
        <p>this is a much taller column than the others Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <span class="shortlink">
          <button class="btn btn-success">Read More</button>
        </span>
      </div>
    </div>
  </div>
  
  <div class="col-sm-4">
    <div class="grid-loop">
      <div class="custom-border">
        <a class="perm_link" href="<?php the_permalink(); ?>">
          <h2>Title</h2>
          <div class="blog-image image-responsive"><?php the_post_thumbnail('img-251x250'); ?></div></a>
        <p>this is a much smaller column than the others</p>
        <span class="shortlink">
          <button class="btn btn-success">Read More</button>
        </span>
      </div>
    </div>
  </div>
</div>
</div>

This worked out beautifully! I was using the wrong class, thanks so much! — rkDev, May 25 '17 at 15:26

LKG · Answer 2 · 2017-05-25T03:40:08.587

If you can use css then use flex property for this below is example for same height box.

 .main {
            display: flex;
        }
        .child {
            flex:1;
            border:1px solid tomato;
        }
        .content {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-flow: column nowrap;
        }
        .content-child{
            padding: 5px;
        }

<div class="main">
    <div class="child">
        <div class="content">
            <div class="content-child">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="content-child">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <div class="child"></div>
</div>

Make all boxes same height. Wordpress gridded post loop using Boostrap,

2 Answers2