Repeater: display element flex with bootstrap

• Fedev

• August 12, 2021 at 6:57 am

Hi

So I have a repeater field that I am using to trigger some modal windows.

So far I can trigger the modal but the triggers (buttons) are not displayed flex in a row.

What I would like is to have 6 buttons next to each other using flex.

I am using Bootstrap 4 and this is my code

<div class="team-section" id="block-24">
	<div class="container bloc-lg">
		<div class="row">
			<div class="col-lg-12">
				<div class="container-team-large">
					<div class="  ">
						<?php
/**
* Bootstrap ACF While Loop Modals
*/

// *Repeater
// modal_repeater
// *Sub-Fields
// modal_header
// modal_body
// modal_footer

// check if the repeater field has rows of data
if( have_rows('member') ):
	$i = 1; // Set the increment variable
 	// loop through the rows of data
    while ( have_rows('member') ) : the_row();
		
		$modal_photo = get_sub_field('photo');
		$modal_name = get_sub_field('name_vorname');
		$modal_title = get_sub_field('title');
		$modal_position = get_sub_field('position');
		$modal_telefon = get_sub_field('telefon');
		$modal_email = get_sub_field('email');
	?>

	<!-- Button to Open the Modal -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal-<?php echo $i;?>">
	  <img src="<?php the_sub_field( 'photo' ); ?>" class="img-fluid" />
	</button>

	<!-- The Modal -->
	<div class="modal" id="myModal-<?php echo $i;?>">
	  <div class="modal-dialog">
	    <div class="modal-content">
	
	      <!-- Modal Header -->
	      <div class="modal-header">
	        <h4 class="modal-title"><?php echo $modal_name;?></h4>
	        <button type="button" class="close" data-dismiss="modal">×</button>
	      </div>
	
	      <!-- Modal body -->
	      <div class="modal-body">
	       <?php echo $modal_title; ?>
			  <?php echo $modal_position; ?>
	      </div>
	
	      <!-- Modal footer -->
	      <div class="modal-footer">
	        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
	      </div>
	
	    </div>
	  </div>
	</div>

	              
	<?php   $i++; // Increment the increment variable
	
	endwhile; //End the loop 

else :

    // no rows found

endif;

?>
						
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Now the Images (modal trigger) are displayed in 2 rows (screenshot attached). I would like to have 6 images in one row

Many thanks in advance!

Screenshot-2....png