# Kirby + Bootstrap: alternate rows in foreach loop

**URL:** <https://forum.getkirby.com/t/kirby-bootstrap-alternate-rows-in-foreach-loop/7098>\
**Category:** Questions\
**Tags:** v2\
**Created:** [March 30, 2017, 10:12am UTC](https://forum.getkirby.com/t/kirby-bootstrap-alternate-rows-in-foreach-loop/7098 "2017-03-30T10:12:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kvkooten](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/kvkooten/32/3935_2.png) [@kvkooten](https://forum.getkirby.com/u/kvkooten)\
**Post date:** [March 30, 2017, 10:12am UTC](https://forum.getkirby.com/t/kirby-bootstrap-alternate-rows-in-foreach-loop/7098/1 "2017-03-30T10:12:52Z")

</div>

Hi everyone,

Relatively new to KirbyCMS and this is my first question here. Hope I can explain my question well 🙂

On the website I’m building I have a page for testimonials. I’ve set up the template, blueprint and content file so that this page has subpages. Currently, there are three subpages (one for each testimonial). Each of these subpages has a featured image.

I use the following foreach loop:

```
<div id="testimonial-previews">

  <?php foreach($page -> children() -> visible() as $testimonial): ?>
  
  <div class="testimonial">
    <div class="left-half">
      <img src="http://placehold.it/100x100" class="img-responsive" />
    </div>
    
    <div class="right-half">
      <h3><?= $testimonial -> title() ?></h3>
    </div>
  </div>

  <?php endforeach ?>

</div>

```

What I’d like to accomplish is alternating the content for the left and the right half in this loop. To be more precise: the first testimonial has to have the image in the left half and the title in the right half, the second has to have the image in the right half and the title to the left. The third then follows the first, and so on, so the grid comes to look like:

image - title  
title - image  
image - title  
title - image

I’m stuck - I get the foreach loop to work but all testimonials are rendered (expectedly) the same way. How can I make this work?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 30, 2017, 10:23am UTC](https://forum.getkirby.com/t/kirby-bootstrap-alternate-rows-in-foreach-loop/7098/2 "2017-03-30T10:23:05Z")

</div>

If you are using floats or flexbox, you can do this with CSS only. Otherwise you can use `indexof()` to apply the classes.

```auto
<?php
$testimonials = $page->children()->visible();
foreach($testimonials as $testimonial): 
  if($collection->indexOf($testimonial) % 2 == 0): ?>
    <!-- your code for even elements -->
  <?php else: ?>
    <!-- your code for odd elements -->
  <?php endif ?>
<?php endforeach ?>

```

---

<div class="post-metadata">

**Author:** ![kvkooten](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/kvkooten/32/3935_2.png) [@kvkooten](https://forum.getkirby.com/u/kvkooten)\
**Post date:** [March 30, 2017, 12:19pm UTC](https://forum.getkirby.com/t/kirby-bootstrap-alternate-rows-in-foreach-loop/7098/3 "2017-03-30T12:19:10Z")

</div>

Thanks, solved the problem thanks to your if else. Also found another part of the solution somewhere in the documentation 🙂

Code is modified heavily, so I’m not sure if this is useful to anyone… “testimonials” is also changed to “referenties” (website is in Dutch), and I have a feeling code could be a lot less repetitive, but here it is:

```
<section id="referenties">
  <div class="container-fluid">
  
  <?php $n = 0; foreach($page->children() as $child): $n++; ?>
  
  <?php if($n%2 == 1): ?>
  
    <div class="row">
      <div class="col-md-6" style="min-height: 20vh; background-image: url('<?= $child -> url() ?>/<?= $child -> coverImage() ?>'); background-size: cover;">
      </div>
      <div class="col-md-6" style="background: skyblue;">
        <h3><?= $child -> title() ?></h3>
        <h5><?= $child -> organisatie() ?></h5>
        <h5><?= $child -> contactpersoon() ?></h5>
        <p><?php echo excerpt($child->text(), 2, 'words') ?></p>
        <a class="btn btn-default" href="<?= $child -> url() ?>">Lees verder</a>
      </div>
    </div><!-- .row -->

    <?php else: ?>
    <div class="row">
      <div class="col-md-6 col-md-push-6" style="min-height: 20vh; background-image: url('<?= $child -> url() ?>/<?= $child -> coverImage() ?>'); background-size: cover;">
      </div>
      <div class="col-md-6 col-md-pull-6" style="background: skyblue;">
        <h3><?= $child -> title () ?></h3>
        <h5><?= $child -> organisatie() ?></h5>
        <h5><?= $child -> contactpersoon() ?></h5>
        <p><?php echo excerpt($child->text(), 3, 'words') ?></p>
        <a class="btn btn-default" href="<?= $child -> url() ?>">Lees verder</a>
      </div>
    </div><!-- .row -->
    <?php endif ?>
  
    <?php endforeach ?>

   </div><!-- .container-fluid -->
 </section><!-- #referenties -->
```

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 4:50pm UTC](https://forum.getkirby.com/t/kirby-bootstrap-alternate-rows-in-foreach-loop/7098/4 "2025-02-06T16:50:18Z")

</div>

Archived on February 6, 2025, 4:50pm UTC