Skip to main content

Advanced Custom Fields repeater with bootstrap rows

If you love using ACF in WordPress, you might want to use Bootstrap with it too.

If you’re going to use the acf repeater field and Bootstrap, you’ll need to do some hacks in PHP.

After every few items, you may want to add a row in between to ensure that your columns don’t push the content down and it’s uneven. Here’s some php that will help you.

Add the below code into your template file, in this example, I need to add rows every 3 columns.

<?php if(get_field('repeater_field')): ?>
   <div class="row">
     <?php while(has_sub_field('repeater_field')): ?>
        <div class="col-md-4">
          <p>My Content</p>
        </div>
     <?php $counter++; if($counter % 3 === 0) :  echo '</div> <div class="row">'; endif; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>

Leave a Reply