I'm using the Bootstrap framework and I'm displaying posts from a certain category in a thumbnail format.
The heights of the thumbnails are different. What I'd like to do is keep the heights different but still have the thumbnails stack beneath each other.
When I have more than 3 posts, it leaves a gap. Basically I'm looking to stack them in the same way as Pinterest.
This is what my code for the thumbnail looks like:
<div class="container-fluid">
<?php
query_posts('cat=8');
while(have_posts()) : the_post(); ?>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail( 'bones-thumb-300' );
}
?>
<div class="caption">
<h2><?php the_title(); ?></h2>
<p class = "text-muted">Posted by <?php the_author(); ?> on <?php the_time('F jS, Y'); ?></p>
<p><?php the_excerpt(); ?></p>
<p><a href="<?php the_permalink(); ?>" class="btn btn-primary" role="button">Read More</a></p>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
This is what it looks like now: my webpage
Any suggestions?
Thanks!
