0

Hi all I have few images uploaded in custom post type as featured image in which i am trying to connect bootstrap with Wordpress and display images side by side in col-md-4. but when i do it displays images in new ROW rather than col-md-4

the code is...

      <?php $loop = new WP_Query( array( 'post_type' => 'portfolio_col_image', 'orderby' => 'post_id' ) );
            while($loop->have_posts()) : $loop->the_post(); ?>




                            <?php
                            // Must be inside a loop.

                                if ( has_post_thumbnail() ) { ?>
                                <div class = "portfolio-column-box">
                                    <div class = "container">

                                    <div class = "col-md-4">
                                       <?php the_post_thumbnail('large', array( 'class'  => 'img-thumbnail'  ) ); ?>
                                    </div>
                                </div>
                            </div>

                                <?php };
                            ?>

                    </div>
                </div>


                    <?php endwhile; ?> 
4
  • Maybe the width of the images is too much. Did you set the image with to 100%?
    – DaBra
    Commented Jul 27, 2018 at 7:31
  • you are using bootstrap 3 or boorstrap 4 ? Commented Jul 27, 2018 at 7:32
  • @charankumar: i am using bootstrap 4
    – rajiv
    Commented Jul 27, 2018 at 7:55
  • @DaBra : I have not set it to 100%
    – rajiv
    Commented Jul 27, 2018 at 7:56

4 Answers 4

1

You have loop problem, container should be outside while loop

      <div class = "container">
     <?php $loop = new WP_Query( array( 'post_type' => 'portfolio_col_image', 'orderby' => 'post_id' ) );
        while($loop->have_posts()) : $loop->the_post(); ?>
                        <?php
                        // Must be inside a loop.

                            if ( has_post_thumbnail() ) { ?>
                            <div class = "portfolio-column-box">
                                <div class = "col-md-4">
                                   <?php the_post_thumbnail('large', array( 'class'  => 'img-thumbnail'  ) ); ?>
                                </div>
                            </div>
                        </div>

                            <?php };
                        ?>

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

the above solution is based on bootstrap 3 version

if you are using bootstrap 4 then you need to include "row" also, as below

<div class="container">
<div class="row">
 //your loop here
2
  • I tried bot the solution.. but still it shows the images in new row rather than 3 columns
    – rajiv
    Commented Jul 27, 2018 at 7:57
  • then you need to check what is the css applied for portfolio-column-box, might be you applied display:block or something Commented Jul 27, 2018 at 8:51
0

Have u used row outside the col-md-4??

0

Bootstrap 4 uses "Flex" for dividing in column so we need to use row before using col Previous version of bootstrap used float for col so it would work with out row.

<div class = "portfolio-column-box">
    <div class = "container">
        <div class="row">
            <?php
            $loop = new WP_Query( array( 'post_type' => 'product', 'orderby' => 'post_id' ) );
            while($loop->have_posts()) : $loop->the_post(); 
                // Must be inside a loop.
                if ( has_post_thumbnail() ) { ?>
                    <div class = "col-md-4">
                        <?php the_post_thumbnail('large', array( 'class'  => 'img-thumbnail'  ) ); ?>
                    </div>
               <?php };
            endwhile; ?> 
        </div>
    </div>
</div>

Hope this will fixed your issue.

0

You're specifying col-md-4 which will show 3 column per row(details), and once have 3 column per row, it should started the new row dynamically and you will have your image in a proper grid. Try below code and see

<?php
$loop = new WP_Query( array( 'post_type' => 'portfolio_col_image', 'orderby' => 'post_id' ) );
$i = 0;
?>
<div class="row">;
<?php
while($loop->have_posts()) : $loop->the_post();
?>
        <div class="vc_col-md-4">
            <?php
                //print your image here
            ?>
        </div>
<?php       
    $i++;
    if ($i % 3 == 0) {
?>  
        </div><div class="row">
<?php       
    }       
endwhile;
?>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.