CODEWITHSUNDEEP
wordpresstwitter-bootstraploops
Kamran Khan
Kamran Khan

Reputation: 453

bootstrap rows and columns with wordpress loop

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?

Upvotes: 1

Views: 1255

Answers (1)

8ctopotamus
8ctopotamus

Reputation: 518

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.

Upvotes: 1

Related Questions