PHP Bootstrap row loop every 3 posts

Question

Trying to display the custom posts on my archive page within a bootstrap row containing 3 columns then starting a new row, got the code but new to PHP and dont know where to put the content.

    <?php
        //Columns must be a factor of 12 (1,2,3,4,6,12)
        $numOfCols = 3;
        $rowCount = 0;
        $bootstrapColWidth = 12 / $numOfCols;
        ?>
        <div class="row">
        <?php
        foreach ($rows as $row){
        ?>  
                <div class="col-md-4"<?php echo $bootstrapColWidth; ?>">
                    <div class="thumbnail">
                        <img src="user_file/<?php echo $row->foto; ?>">
                    </div>
                </div>


        <?php
            $rowCount++;
            if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
        }
        ?>
        </div>


        <div class="embed-container">
        <?php the_field('podcast_embed_link'); ?>
        </div>



        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><h3><?php the_title(); ?></a></h3>


        <p><b><?php echo $date->format( $format_out );?></b></p>

        <p><?php the_field('description'); ?></p>

        <?php if( get_field('thumbnail') ): ?>

        <img src="<?php the_field('thumbnail'); ?>" />


        <?php endif; ?>

        <?php endwhile; // end of the loop. ?>


        </div>
    </div>
</div><!-- #content -->

Here is the code for the page archive.podcasts.php, where would i add the custom fields within the row loop?

Answer 1

In this part of code:

<div class="col-md-4"<?php echo $bootstrapColWidth; ?>">

You must get wrong bootstrap class like col-md-41, col-md-412. Correct you code by this way:

<div class="col-md-<?php echo $bootstrapColWidth; ?>">

Answer 2

First of all, you don't need to close and open row tag each 3 items. If you leave the code like this:

<div class="row">
 <?php
        foreach ($rows as $row){
        ?>  
                <div class="col-md-<?php echo $bootstrapColWidth; ?>">
                    <div class="thumbnail">
                        <img src="user_file/<?php echo $row->foto; ?>">
                    </div>
                </div>
        <?php
        }
        ?>
</div>

you will get the same effect, but without the separation that a row tag involves. Notice that the line involving "col-md-4" has already changes in order to not create wrong col size usage.