Adjust Bootstrap "row" to fit various # of columns "col-xs-12 col-sm-4 col-md-3"?

Question

Inserting posts on a page using WP Loop. Trying to achieve a grid layout using Bootstrap columns class "col-md-3" for example. I was able to find useful code but it's missing one part to what I'm trying to achieve. Basically, when you use the WP Loop to pull and display posts on a page you can put the Bootstrap column class "col-md-43" for each posts. That way each post is in a column and you basically create a grid of posts. Looks great, except that each row has different heights and then you have weird spacing/gaps.

OK so there are many solutions out there and I liked the one proposed by Zarko Jovic. https://stackoverflow.com/a/35963572/2243165

Basically the solution is to put the columns inside a "row" class. Problem solved.

This works except I'm not sure how to go about it if I have different columns based on the screen size. For example I use "col-xs-12 col-sm-4 col-md-3". Have no idea if it's possible to create a row that adjusts for each of the 3 different column sizes/classes. The code in the link is written to use 4 columns in a row. But when using "col-xs-12 col-sm-4 col-md-3" class the row sometimes has 1 column, sometimes 3, and other times 4 columns per row :(

Here's my code so far without placing the "row" class.

<?php
// Force loop to display defined custom post type 
$args2 = array(
    'post_type' => 'i',
    'author' => get_queried_object_id(), 'showposts' => 100
    );

$editors_pages = new WP_Query($args2);

// The loop
if ($editors_pages->have_posts()) : while ($editors_pages->have_posts()) : $editors_pages->the_post(); ?> 

<div class='col-xs-12 col-sm-4 col-md-3'>
    <div class='author-pages-title'><h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4></div>
</div>

<?php endwhile; else : ?>
    <p class='align-center'>Sorry, no pages posted yet by this user.</p>
<?php endif;
wp_reset_postdata();

?>

Answer 1

A good way to tackle this is to give min height to your columns. This You may need a media query for each size i.e. xs,md.

// The loop

<div class="row"> // put a div 
if ($editors_pages->have_posts()) : while ($editors_pages->have_posts()) : $editors_pages->the_post(); ?> 

<div class='special-min-height col-xs-12 col-sm-4 col-md-3'> // add a class to reference too.
    <div class='author-pages-title'><h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4></div>
</div>

<?php endwhile; else : ?>
    <p class='align-center'>Sorry, no pages posted yet by this user.</p>
<?php endif;

</div>

CSS

.row .special-min-height {
    min-height: 200px;
}

Then you can write media query for the remaining screens giving different min height.

Answer 2

use the following css property for solving the problem.

height: 100px;
overflow:auto;

through this way all your boxes will have same height and if the content is more then the given height will automatically add a scroll and adjust your content in it.