CODEWITHSUNDEEP
twitter-bootstrapadvanced-custom-fields
Dnbl_
Dnbl_

Reputation: 27

ACF repeater fields outputting down one column instead of across three columns

I have a repeater field with two sub fields (both text) and I want them to display across three columns. At the moment they're appearing in one column and each repeater field is appearing in a new row instead of across three columns.

Here's my code: 

<div class="container staff"> <!-- Staff -->
<div class="row">
    <div class="col-lg-4">                                                  
            <?php if( have_rows('directors_info') ): ?>
                <?php while ( have_rows('directors_info') ) : the_row(); ?>

                    <?php the_sub_field('name'); ?>
                    <?php the_sub_field('profile'); ?>

                <?php endwhile; ?>
            <?php endif; ?>                                                 
    </div>
</div>

Upvotes: 0

Views: 465

Answers (1)

CarlosAS
CarlosAS

Reputation: 691

You are using just one column instead of creating one on each iteration. Try something like this:

<div class="container staff"> <!-- Staff -->
  <?php if( have_rows('directors_info') ): ?>
    <div class="row">
      <?php while ( have_rows('directors_info') ) : the_row(); ?>
        <div class="col-lg-4">
          <?php the_sub_field('name'); ?>
          <?php the_sub_field('profile'); ?>
        </div>
      <?php endwhile; ?>
    </div>
  <?php endif; ?>
</div>

This would generate something like this http://jsfiddle.net/k0L7dvpc/

Upvotes: 1

Related Questions