How to create bootstrap html structure in php loop?

Question

I'm using bootstrap and need to create structure like this

    <div class="row">
        <div class="col-sm-3">
            <!--content loop 1-->
        </div>
        <div class="col-sm-3">
            <!--content loop 1-->
        </div>
        <div class="col-sm-3">
            <!--content loop 2-->
        </div>
        <div class="col-sm-3">
            <!--content loop 2-->
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3">
            <!--content loop 3-->
        </div>
        <div class="col-sm-3">
            <!--content loop 3-->
        </div>
        <div class="col-sm-3">
            <!--content loop 4-->
        </div>
        <div class="col-sm-3">
            <!--content loop 4-->
        </div>
    </div>

I need to create it in a single foreach loop but on each loop I only create this structure.

    <div class="col-sm-3">
        <!--content loop 1-->
    </div>
    <div class="col-sm-3">
        <!--content loop 1-->
    </div>

I can create the first <div class="row"></div> outside of the loop but how can I break out of the loop to create the second <div class="row"></div> and continue the loop

Ashwani · Accepted Answer · 2015-06-16 21:50:06Z

4

You can do some thing like this. You can modify according to your need. I just mentioned logic

   <div class="row">
     <?php
         $i = 0;
         foreach(....../*your code*/){
           if($i == 4){
               $i = 0;
              ?>
                  </div><div class="row">
                <?php
            } 
                ?>
            <div class="col-sm-3">
               <!--content-->
            </div>
          <?php
            $i++;
         }
        ?>
        </div>

edited Jun 16, 2015 at 21:50

answered Jun 16, 2015 at 17:20

Ashwani

7272 gold badges7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ttmt Over a year ago

I thought this was working but it seems to miss or skip the 3rd position in the array - I have a demo here viper-7.com/EsGoc9. I want 2 divs in each row and two rows. I have just output the array elements and it misses the 3rd element

Ashwani Over a year ago

yes it seems i missed it. see the edit i made in answer. and check edit here viper-7.com/bRjxb3

user2755140 · Accepted Answer · 2015-06-16 18:17:20Z

1

It's as simple as following this logic:

for($i = 0;$i < 4;$i++) {
    echo '<div class="row">';
    for($j = 0;$j < 4;$j++) {
        echo '<div class="col-sm-3"></div>';
    }
    echo '</div>;'
}

answered Jun 16, 2015 at 18:17

user2755140

2,0274 gold badges15 silver badges17 bronze badges

Comments

Pablo S G Pacheco · Accepted Answer · 2015-09-18 14:08:02Z

0

I like to do this way because i think is cleaner and easier to manage:

<?php
    $colsOffset = 4;
    $items = array('content1','content2','content3','etc...');
    $i = 0;
?>
<?php foreach ( $items as $item ) { ?>
    <?php echo ($i % $colsOffset == 0 || $i == 0) ? '<div class="row">' : '' ?>
    <div class="col-sm-3">
       <!--content loop-->
    </div>
    <?php echo (($i + 1) % $colsOffset == 0 || ($i + 1) == count($items)) ? '</div>' : '' ?>
    <?php $i++; ?>
<?php } ?>

edited Sep 18, 2015 at 14:08

answered Jul 31, 2015 at 2:20

Pablo S G Pacheco

2,62030 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to create bootstrap html structure in php loop?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related