CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3gridalignment
user6738171
user6738171

Reputation: 1017

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();

Upvotes: 1

Views: 2724

Answers (3)

Satya
Satya

Reputation: 53

it is due to you are placing all together like 

 <div class="col-sm-6 col-xs-6" >
 </div>
  <div class="col-sm-6 col-xs-6" >
 </div>
 <div class="col-sm-6 col-xs-6" >
 </div>
  <div class="col-sm-6 col-xs-6" >
 </div>

So in this can it will tough for browser to align it proper as it wont know where to place the third one as space is filled.

So what you need to do is tell the browser to place it in next row by using the bootstrap class itself

<div class="row" >
<div class="col-sm-6 col-xs-6"  >
test
     </div>
      <div class="col-sm-6 col-xs-6" >
      test
     </div>
</div>
 <div class="row" >    
     <div class="col-sm-6 col-xs-6" >
     test
     </div>
      <div class="col-sm-6 col-xs-6" >
      test
     </div>
   </div>

Now you will get it proper.

Upvotes: 0

vanburen
vanburen

Reputation: 21663

This is due to the float: left property applied to Bootstrap columns which is generally solved by using only 12 columns for each row. Bootstrap does have it's own classes to handle this: Responsive Column Resets but since you're creating these dynamically it's probably simpler to just clear the float yourself with CSS. Also see MDN: Clear

Working Example:

div.thumbnail {
  background: #9CCC65;
}
@media (min-width: 992px) {
  .item:nth-child(3n+1) {
    clear: left;
  }
  div.thumbnail {
    background: #1976D2;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">

    <div class="col-md-4 col-xs-12 item">
      <div class="thumbnail">
        <img src="http://placehold.it/750x550/212121/FAFAFA?text=1" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12 item">
      <div class="thumbnail">
        <img src="http://placehold.it/750x550/212121/FAFAFA?text=2" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12 item">
      <div class="thumbnail">
        <img src="http://placehold.it/750x550/212121/FAFAFA?text=3" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12 item">
      <div class="thumbnail">
        <img src="http://placehold.it/750x550/212121/FAFAFA?text=4" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12 item">
      <div class="thumbnail">
        <img src="http://placehold.it/750x550/212121/FAFAFA?text=5" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske
            enkelt fyldtekst.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12 item">
      <div class="thumbnail">
        <img src="http://placehold.it/750x550/212121/FAFAFA?text=6" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12 item">
      <div class="thumbnail">
        <img src="http://placehold.it/750x550/212121/FAFAFA?text=7" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12 item">
      <div class="thumbnail">
        <img src="http://placehold.it/750x550/212121/FAFAFA?text=8" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typ ografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typograf iindustrien.Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografi industrien.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12 item">
      <div class="thumbnail">
        <img src="http://placehold.it/750x550/212121/FAFAFA?text=9" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12 item">
      <div class="thumbnail">
        <img src="http://placehold.it/750x550/212121/FAFAFA?text=10" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typograf iindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiind ustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typogr afiindustr ien.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12 item">
      <div class="thumbnail">
        <img src="http://placehold.it/750x550/212121/FAFAFA?text=11" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typ ografiind ustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12 item">
      <div class="thumbnail">
        <img src="http://placehold.it/750x550/212121/FAFAFA?text=12" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p>
        </div>
      </div>
    </div>

  </div>
</div>

Upvotes: 3

user2263572
user2263572

Reputation: 5606

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>

Upvotes: 3

Related Questions