Search code examples
htmltwitter-bootstraptwitter-bootstrap-3gridalignment

bootstrap grid not aligning correctly

I use the bootstrap grid system on my front page to display my posts as 1 post in first row, 3 posts in second row, 3 posts in third row, etc. I'm having issues with my posts not aligning in my col-md-4 rows. However, the only time this problem pops up is when I have a title that is longer then one line (examples below). Does anyone know how I can fix this?

how it should look... enter image description here

how it looks when I have a post that has a title (or excerpt) that goes on to multiple lines... enter image description here

as you can see example post 12 moves all the way over to the right (where it should be on the left) example post 13 and 14 are moved underneath. I have no idea how to fix this problem, and I would really appreciate any help!

my front-page.php

<?php
/*
 * Template Name:
 */

get_header();
get_template_part ('inc/carousel');

$the_query = new WP_Query( [
    'posts_per_page' => 14,
    'paged' => get_query_var('paged', 1)
] );

if ( $the_query->have_posts() ) { ?>
    <div id="ajax">
    <?php
    $i = 0;
    while ( $the_query->have_posts() ) { $the_query->the_post();

        if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
        <article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
            <div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
                </div>
               <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <div class="front-page-post-info">
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
                                 <?php get_template_part( 'share-buttons' ); ?>
                <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
            </div>
            </article>
<?php

        } else { // Small posts ?>
            <article <?php post_class( 'col-md-4' ); ?>>
                <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
                <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <div class="front-page-post-info">
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
                                 <?php get_template_part( 'share-buttons' ); ?>
                <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
            </div>
            </article>
            <?php
        }
        $i++;
    }?>
    </div>
    <?php if(get_query_var('paged') < $the_query->max_num_pages) {
       load_more_button();
    }
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();

Solution

  • Make sure you are nesting your columns within rows.

    For example this:

    <div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

    Instead of this:

    <div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>