Home › Forums › General Issues › Repeater with Bootstrap 3
Hey !
I wrote this topic because I didn’t find an answer from here or other forums on the web.
I don’t know how to manage this with Bootstrap.
I use a repeater to repeat some items from 1 to infinite number. For those who don’t know, Bootstrap work with rows. One row contain 12 columns. My items have 3 columns, so I can insert 4 items in a row.
I don’t know how to “break” the row to create another one, each 4 items. This problem is very often embarrassing for me.
That’s a bit of my code :
<div class="row">
<?php
if(have_rows('unite')):
while(have_rows('unite')): the_row();
?>
<div class="col-md-3">
<div class="text-bloc single-tarif">
<h3><?= the_sub_field('nom') ?></h3>
<?= the_sub_field('description') ?>
<span class="prix"><?= the_sub_field('prix') ?></span>
</div>
</div>
<?php
endwhile;
else:
endif;
?>
</div>
How can I modificate it to start a new row each 4 items and break the previous row each 4 items, without forgetting I have to close the last row at the end, no matter how many items I have.
Thanks !!
<?php $i = 1; ?>
<div class="row">
<?php while ( have_rows('unite') ): the_row(); ?>
<div class="col-md-3">
<h3><?php the_sub_field('nom'); ?></h3>
</div>
<?php
if( $i == 4 ){
echo '</div><div class="row">';
$i = 0;
}
$i++;
?>
<?php endwhile; ?>
</div>
You need to close off the row every time there is 4 columns, this should work $i is the count for columns
<?php $i = 1; ?>
<div class=”row”>
<?php while ( have_rows(‘unite’) ): the_row(); ?>
<div class=”col-md-3″>
<h3><?php the_sub_field(‘nom’); ?></h3>
</div>
<?php
if( $i == 4 ){
echo ‘</div><div class=”row”>’;
$i = 0;
}
$i++;
?>
<?php endwhile; ?>
</div>
The topic ‘Repeater with Bootstrap 3’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.