CODEWITHSUNDEEP
phphtmlwordpresstwitter-bootstrap
BioShock
BioShock

Reputation: 793

3 element per row in bootstrap/Wordpress

I have the following problem: i need to create really simple layout, on each line i would like to have 3 box all of the same size, and if i understood right, in order to achieve this i need to construct a structure like the following:

<div class="row">
   <div class=" news col-md-3 col-centered">
   </div>
   <div class=" news col-md-3 col-centered">
   </div>
   <div class=" news col-md-3 col-centered">
   </div>
</div>

This is my php script in the index.php:

    <?php while(have_posts()) : the_post();?>
       <div class="row">
         <div class=" news col-md-3 col-centered">
          <h4><a href="<?php the_permalink();?>"><?php the_title();?></a></h4>
          <p><?php the_excerpt(); ?> </p>
         </div>
       </div>
    <?php endwhile; wp_reset_query(); ?>

With this code, each box get a <div class="row"> element like the following:

  <div class="row">
    <div class=" news col-md-3 col-centered">
    </div>
  </div>
...

How can i fix this?

This is what i get now: if a box as more height than another, it leave the space under it without any element. image

the height of the box depends on the content. what i would like to have is something like this: image2

Upvotes: 3

Views: 3728

Answers (1)

rnevius
rnevius

Reputation: 27112

Just move the row outside of The Loop, so that it's not repeated:

<div class="row">
    <?php while(have_posts()) : the_post(); ?>
        <div class="news col-md-4 col-centered">
            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
            <p><?php the_excerpt(); ?> </p>
        </div>
    <?php endwhile; wp_reset_query(); ?>
</div>

Also, you need to change your column width to col-md-4, since Bootstrap uses a 12-column grid, and you want 3 columns per row.

If you need to actually close out each row after 3 columns are shown, you need to use a counter:

<div class="row">
    <?php $i = 1; while(have_posts()) : the_post();?>
        <div class="news col-md-3 col-centered">
            <h4><a href="<?php the_permalink();?>"><?php the_title();?></a></h4>
            <p><?php the_excerpt(); ?> </p>
        </div>
        <?php if ( $i % 3 === 0 ) { echo '</div><div class="row">'; } ?>
    <?php $i++; endwhile; wp_reset_query(); ?>
</div>

This last example will ensure that all floats are cleared, and that each row of elements are on their own lines.

Upvotes: 10

Related Questions