-1

I'm trying to make a wordpress page and using the following code:

<div class='container-fluid'>
    <div class='row'>
    <?php
     if(have_posts()):
        while(have_posts()):
            the_post();
            echo '<div class="col-sm-3 border">';
            the_title( '<h3>', '</h3>');  //echo <h3>The Title</h3>
            the_excerpt();
            echo '</div>';
        endwhile;
        endif;
     ?>
    </div>
</div>

The blogroll is displaying like this:

Bootstrap align the rows

And i want to display something like this: (sorry for paint)

no aligned

Thanks for reading

Bradatan Dorin
  • 1

1 Answers1

0

I'm not that great with PHP, but I think you can do something with a Modulus to make a new row.

<div class='container-fluid'>
<div class='row'>
<?php

if(have_posts()):

    counter = 1;
    while(have_posts()):

        if (counter % 4 == 0) {
            echo '</div><div class="row">';
        }
        the_post();
        echo '<div class="col-sm-3 border">';
        the_title( '<h3>', '</h3>');  //echo <h3>The Title</h3>
        the_excerpt();
        echo '</div>';
        counter++;
    endwhile;
endif;
 ?>
</div>

NosNits
  • 102
  • 6
  • Thanks a lot for your answer... I will try as soon as i will can – Bradatan Dorin Mar 07 '16 at 21:45
  • I hope it helps. You will probably need to move the_post() inside of your col-sm-3 – NosNits Mar 07 '16 at 21:47
  • Hi....yes....but its almost the same....if I have a larger div.... the other 4 divs on the next row will come in a line.... i find something that approach my problem.... http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height?rq=1 but its not exactly what i want – Bradatan Dorin Mar 08 '16 at 20:56
  • After some time i found the solution....there's a framework named masonJs...which is used for exact this... good to know for you or maybe for anyone who read this. – Bradatan Dorin Mar 24 '16 at 16:41