Bootstrap 3 multi column dynamic block loop

debugcn Published at Dev

Mayeenul Islam

Bootstrap is by default designed for Row-based designs (horizontal), like the following:

+-------------+ +--+
| 1           | |  |
|             | |  |
+-------------+ |  |
| 2           | |  |
|             | |  |
+-------------+ |  |
| 3           | |  |
|             | |  |
+-------------+ |  |
| 4           | |  |
|             | |  |
+-------------+ +--+

I can easily do that by doing the following:

<div class="container">
    <div class="row">
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-12">POST</div>
                <div class="col-md-12">POST</div>
                <div class="col-md-12">POST</div>
            </div>
        </div>
        <div class="col-md-2">Sidebar</div>
    </div>
</div>

I can repeat (dynamic loop) the number of blog posts within the left area.

But if I'm going to do something like the following, where all the blog posts are on the left in Two columns, and the looping makes the layout Vertical (not in Bootstrap's concept) what can I do then? How can I implement this?

+-----+ +-----+ +--+
| 1   | | 2   | |  |
|     | |     | |  |
+-----+ +-----+ |  |
| 3   | | 4   | |  |
|     | |     | |  |
+-----+ +-----+ |  |
| 5   | | 6   | |  |
|     | |     | |  |
+-----+ +-----+ |  |
| 7   | | 8   | |  |
|     | |     | |  |
+-----+ +-----+ +--+

I know the HTML is:

<div class="container">
    <div class="row">
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-6">Left</div>
                <div class="col-md-6">Right</div>
            </div>
            <div class="row">
                <div class="col-md-6">Left</div>
                <div class="col-md-6">Right</div>
            </div>
        </div>
        <div class="col-md-2">Widget</div>
    </div>
</div>

But I'm confused with the dynamic part. I can guess that, it can be achieved by something like:

<?php for( $i=0; $i<10; $i++ ) { ?>
    <?php if( $i==0 ) echo '<div class="row">'; ?>
        <div class="col-md-6"><?php echo 'post #'. $i; ?></div>
    <?php if( $i==2 ) echo '</div><!--/.row-->'; ?>
<?php } ?>

But isn't it a lengthy process? How can I achieve such a Vertical loopy layout using Bootstrap 3?

ckuijjer

Either don't output these inner .rows and simply use .col-md-6 instead of .col-md-12 in the first example,
or,
output the inner starting rows <div class="row"> if i is even (i % 2 == 0) and the ending rows </div> when i is odd (i % 2 == 1).