Dynamically Create Card Grid Using Foreach In PHP

[weblinxpro]

Good day

I am trying to create a three column bootstrap card that will dynamically display data using php and mysql my challenge is instead of dispaying in a grid it is displaying linearly. see the code below

[<?php

              require "database/dbconfig.php";

              //include_once __DIR__.'/core-php-admin/database/dbconfig.php';

              $query = "SELECT * FROM users";

              $query_run = mysqli_query($connection, $query);

              if (mysqli_num_rows($query_run) >0)

              {

                foreach ($query_run as $row)

                {

                  ?>

  <div class="container py-5">

    <div class="row mt-3">

      <div class="col-xs-12 col-sm-6 col-md-4">

                <div class="frontside">

                    <div class=" my-card card shadow-sm p-3 mb-5 bg-white rounded">

                      <div class="row">

                        <div class="col-sm-3">

                          <img class="card-img user-img d-none d-sm-block" src="img/participants/bizlogo.png"  alt="Card image"/>

                          &nbsp;

                          <img class="card-img user-img user-img d-none d-sm-block" src="img/participants/bizlogo.png" alt="Card image"/>

                        </div>

                        <div class="col-sm-9">

                          <div class="card-body-right">

                            <p class="card-title" style="font-family:Montserrat; font-size:15px"><strong>Maramoja Transport</strong>

                              <br>

                              <span class="sub-title" style="line-height:17px">Founder: Nasiru Mustapha </span>

                            </p>

                            <p class="card-text" style="font-family:Montserrat; font-size:15px">

                                Maramoja Transport

                             

                            </p>

                            <a href="#trasteaprofile" data-toggle="modal" data-target="#trasteaprofile"><p style="font-family:Montserrat; font-size:15px">See More</p></a>

                          </div>

                        </div>

                      </div>

                    </div>

                </div>

              </div>

       

      </div>

  </div>

  <?php

        }

      }

      else

      {

        echo "No record found";

      }

      ?>](https://)

kindly help

[m_hutley]

@weblinxpro

kindly help

with what, precisely?

[SamA74]

It is hard to offer any assistance with out knowing exactly what problem you are facing with this.
Because you posted in the PHP forum, I presume it is about retrieving/displaying the correct data.
If it is about the layout and structure, that would be a HTML & CSS question.

[Drummin]

Agreed to above comments as the main problem I see is html related. When dealing with bootstrap you need to read up on some of the classes so you understand what you are doing.

Generally speaking class container is 100% width with some padding and margin. Class row is display flex and defines negative right and left margin to counter the padding of the container class. This gives you a full width wrapper to add content to. This row class is a container in itself that you can add div’s to and they will float or wrap down within this container.
So your outer containers are these 2 divisions.

<div class="container py-5">
	<div class="row mt-3">
	<!-- Your loop code goes here within the container -->
	<?php
		if(mysqli_num_rows($query_run) >0){
			foreach ($query_run as $row){ 
				/*Card display code goes here*/

			}
		}else{
			echo "No record found";
		}
		?>
	</div>
</div>

Understanding that col, if defined, will represent a percentage width of the container based on screen width or if not defined there can be 12 col’s in a row before it wraps.

One 100% width div (col) would be col-12 and we would want to see only ONE profile card when viewing on a small screen so we would define this class as col-sm-12.

On a tablet we might want to have two cols shown and so you would define this class as col-md-6.

Then on large screens we want the 3 columns and so 12 / 3 = 4 so you would define this class as col-lg-4 .

So I would replace your card wrapper div with these 3 display types.

<div class="col-lg-4 col-md-6 col-sm-12">

You’ll notice that within your card div you have both a class col-sm-3 and a class col-sm-9 so these two div’s will sit side by side within the col-12 width. These div’s hold the image and profile information respectively.

As far as php related dynamic DB content it is a matter of echoing the database fields within the places on the card. As an example I will use the fields image, fullname, title and subtitle. And instead of messy back and forth between html and php echos, I will just echo this whole section out.

/*Card display code goes here*/
echo '<div class="col-lg-4 col-md-6 col-sm-12">
	<div class="frontside">
		<div class=" my-card card shadow-sm p-3 mb-5 bg-white rounded">
			<div class="row">
				<div class="col-sm-3">
					<img class="card-img user-img d-none d-sm-block" src="img/participants/'.$row['image'].'"  alt="Card image"/>
				</div>
				
				<div class="col-sm-9">
					<div class="card-body-right">
						<p class="card-title" style="font-family:Montserrat; font-size:15px">
							<strong>'.$row['fullname'].'</strong>
							<br>
							<span class="sub-title" style="line-height:17px">'.$row['title'].'</span>
						</p>
						
						<p class="card-text" style="font-family:Montserrat; font-size:15px">'.$row['subtitle'].'</p>
						
						<a href="#trasteaprofile" data-toggle="modal" data-target="#trasteaprofile"><p style="font-family:Montserrat; font-size:15px">See More</p></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>'."\r";

You should have something like this 3 column display that changes to 2 and then 1 column as the screen gets smaller.

[John_Betong]

This standalone page maybe of interest because it is dynamically generated from a book search. I have tried numerous ways to display Google Books information and this seems the best way of containing data book data in a block.

View the source and see how Bootstrap is not required. The main DL width could be adjusted to cater for multiple cards on one line:

“https://dasabookcafe.tk/GLAST.php

  <dl class="the-review" 
    style="↩
    width:96%; margin: 0 auto 2em;↩
    border: solid 1px #ddd;↩
    text-align: left;↩
    background-color: #eeefee;↩
    border-radius: 0.42em;↩
  ">↩
    <dt>↩
      <img 
        src="https://books.google.com/books/content?id=9XHoO7dlivUC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" 
        alt="#" 
        style="float:left;margin:.21em .42em .42em;"> ↩
    </dt>↩
↩
    <dd 
      style="margin: 0 0 0.88em;">↩
      <small> Author: &nbsp; </small>
      John Stubbs ↩
    </dd>↩
↩
    <dd 
      style="margin: 0 0 0.88em;">  ↩
      <small> Title: &nbsp; &nbsp;&nbsp; </small>
      John Donne: The Reformed Soul: A Biography↩
    </dd>↩
↩
    <dd style=" margin: 0 0 0.88em;"> "Elegantly written, psychologically and historically astute."—Los Angeles Times Book Review From scholar to buccaneer, from outcast to establishment figure, John Donne emerged as one of the greatest English poets. Following Donne from Plague-ridden streets to palaces, from taverns to the pulpit of St Paul's, John Stubbs's "exemplary literary biography" (Harold Bloom) is a vivid portrait of an extraordinary writer and his country at a time of bewildering and cruel transformation. &nbsp; </dd>↩
↩
    <dd 
      class="review-button"
      style="padding:.42em;margin: 0 0 0.88em;text-align:center;">  ↩
      Reviews: ↩
      <strong class="fsl fgb" > ↩
        <a href="https://books.google.com/books?vid=ISBN9780393342635">
           9780393342635 
        </a>  ↩
      </strong>↩
    </dd>↩
  </dl>

[Drummin]

Yes those <dl><dd> tags are interesting. I’ve made a few collapsible menus with those. I’ve found they work more like <ul><li> tags… I’ve not tried having <dd> as inline block or floating side by side.