bootstrap 4 cards with php foreach loop

Question

Iam trying to get my web page to display all of my shop items in bootstrap 4 cards. 3 wide by however many deep ( i may add pagination another day )

I've got a php foreach loop which populates bootstrap4 cards perfectly. The trouble is they display vertically ( one on top of the other ) . ive tried class= columns which works on dummy divs but not when i integrate with my for each loop.

I ve tried everything regarding bootstrap docs but cant get the cards to display 3 wide and however many deep ( the foreach and the items control this. )

Should i be even using 'cards' or use something else. thx for your time

    <div class="container">


    <!-- $result = my php code using x-path to get results from xml query goes here. -->
<?php 
    foreach ( $result as $elements){
  ?>



       <div class="row-fluid ">
    <div class="col-sm-4 ">
<div class="card-columns-fluid">

    <div class="card  bg-light" style = "width: 22rem; " >

      <img class="card-img-top"  src=" <?php echo $elements->pictures->picture[2]->filename  ; ?> " alt="Card image cap">

      <div class="card-body">
        <h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
         <p class="card-text"><b><?php echo $elements->price_text ?></b></p>
        <p class="card-text"><?php echo $elements->bullet1 ?></p>
        <p class="card-text"><?php echo $elements->bullet2 ?></p>
        <a href="#" class="btn btn-secondary">Full Details</a>

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

    <?php
        }
      }
    ?>

    </div> 
     </div> <!--container close div  -->

Solution 1

As stated, the .row-fluid should be outside of the loop :

<div class="container">
    <div class="row-fluid ">
    <!-- my php code which uses x-path to get results from xml query. -->
    <?php foreach ( $result as $elements) : ?>
        <div class="col-sm-4 ">
            <div class="card-columns-fluid">
                <div class="card  bg-light" style = "width: 22rem; " >
                    <img class="card-img-top"  src=" <?php echo $elements->pictures->picture[2]->filename  ; ?> " alt="Card image cap">

                    <div class="card-body">
                        <h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
                        <p class="card-text"><b><?php echo $elements->price_text ?></b></p>
                        <p class="card-text"><?php echo $elements->bullet1 ?></p>
                        <p class="card-text"><?php echo $elements->bullet2 ?></p>
                        <a href="#" class="btn btn-secondary">Full Details</a>
                    </div>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
    </div>
</div> <!--container div  -->

Solution 2

You need to move your <div class="row-fluid "> class outside of the foreach loop, otherwise it will create a new row for each class.

Also, as a comment has mentioned, you need to close all your divs correctly.

Comments

[Kurohige]

<?php echo $elements->advert_heading ?> can be done by <?= $yourVariable ?>

[Glen]

thx for the tip: like this: <p class="card-text"><?= $elements->bullet2 ?></p>

[Nik]

Try removing width from <div class="card bg-light">. Probably that's the issue..

[Glen]

No it just made the cards less wide to thumbnail size.. no change on the grid , i ve also got a test page now with no css linked to it just to make sure no conflicts in testing.

[Bernard Pagoaga]

In your .container, I count 5 opening divs and only 3 closing ones ? Am I missing something ? EDIT : the .row should be outside of the loop

[Kurohige]

<div class="row-fluid "> is inside the loop so you are creating a row for each $elements

[Glen]

i ve put the row under the container class now,,, cards are bigger but no luck on the columns x 3

[Glen]

I guess never under estimate the power of closing </div> and positioning your classes. thx all

[Glen]

that did it many thanks,,, need to give the above answer the credit though as a code demo is always better for future dopes like me..

[Glen]

it stacks again with row-fluid ,, needs to <div class="row"> for my example,,,but i have a load more fiddling to do to get the divs sitting nicely together ... so fluid might work for others classes selections.

[Glen]

Same for container - fluid ( take fluid out )

[Glen]

also 'card-deck' spaces out the cards auto nicely , rather then 'card-columns'