bootstrap rows and columns with wordpress loop

Question

I have a bit of a logical design dilemma with working on Bootstrap inside a Wordpress loop and I'm curious to know if there are any possible solutions to this that others might have already found.

I basically have a loop that goes through 12 posts. I'm using the bootstrap grid system to lay them out, and changing the column classes for responsive changes for mobile and tablet.

So, basically, this is what my code looks like :

<div class="row">
    <?php while ( $parent->have_posts() ) : $parent->the_post(); ?>
    <div class="col-lg-4 col-xs-12">
    	<h3><?php the_title(); ?></h3><hr />
    	<div><?php the_content(); ?></div>
    </div>

    <?php endwhile; ?>
</div>

Since there are more than 3 posts, this works well in laying them out in a 3-column grid in multiple rows without specifically putting them inside separate "row" elements every three posts. However, the height of the col-4 elements mess up the grid. So, if one col-lg-4 element has a bigger height, the ones following it don't float properly.

If I put them in a row element every 3 posts, this affects the responsive layout because now I have one empty element space when I change the columns to be 3 per post as opposed to 4.

Any ideas on how this can be worked around?

8ctopotamus · Accepted Answer · 2015-07-22 21:02:40Z

1

I was running into the same thing and was able to work around this problem by using the matchHeight jQuery plugin to check the heights of each column, and then apply that height to each one so they are all equal and the columns do not get out-of-whack.

answered Jul 22, 2015 at 21:02

8ctopotamus

5181 gold badge7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

bootstrap rows and columns with wordpress loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related