Home Forums Front-end Issues Repeater: display element flex with bootstrap


Repeater: display element flex with bootstrap

  • 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="  ">
    * 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" />
    	<!-- 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>
    	      <!-- Modal body -->
    	      <div class="modal-body">
    	       <?php echo $modal_title; ?>
    			  <?php echo $modal_position; ?>
    	      <!-- Modal footer -->
    	      <div class="modal-footer">
    	        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    	<?php   $i++; // Increment the increment variable
    	endwhile; //End the loop 
    else :
        // no rows found

    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!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.