How to display data from a MySql table in indiviual cards using php?

Question

I have been wanting to do this on my website but I cannot find a proper way to do this. Any resources will be great. Overall, I am trying to show each data value in an individual bootstrap card. Furthermore, is it possible to have the number of cards be equal to the number of values in the MySql table? What I didn't understand was how to integrate PHP into HTML in such a way that the page displays a changeable number of bootstrap cards. I am trying to do this in PHP (which I am fairly new in using). Thanks for the help. All responses are appreciated.

//the following gets values from the two tables, I am trying to get the values from the "data" table 
if (isset($_SESSION['username'])) {
    $userLoggedIn = $_SESSION['username'];
    $user_details_query = mysqli_query($con, "SELECT * FROM users WHERE username='$userLoggedIn'" );
    $user = mysqli_fetch_array($user_details_query);


    $user_id = $user['id'];
    $data_detail_query = mysqli_query($con, "SELECT * FROM data WHERE user_id ='$user_id'");
    $data = mysqli_fetch_array($data_detail_query);

    $num_rows = mysqli_num_rows($data_detail_query);
    }

//The following shows one bootstrap card that I was able to create using one row. 
<div class="card" style="width: 18rem;float:left;margin-top:20px;margin-left:20px;border-color:white;border-width:5px;">

      <div class="card-block">
          <img style="height:250px;width:100%;" src="<?php echo $data['icon']; ?>"  alt="Card image cap">
            <div>
            <h1 class="card-title" ><?php echo $data['name']?><span style="color:#5aff28;float:right" ><?php echo $data['level']; ?></span></h1>
            <h5 class="card-subtitle mb-2 text-muted"><?php echo $data['category']; ?></h5>
            <p class="card-text"><?php echo $data['description']; ?></p>
            <a href="<?php echo $data['link']; ?>" class="card-link">Link</a>
            <a href="<?php echo $data['developer_link']; ?>" class="card-link">Developer Profile</a>

        <form method="post">

              <div style="width:200;float:left;margin-top:5px" class="form-group">
                <input  type="text" class="form-control" id="code" name="code" placeholder="Enter Code">
              </div>

        </form method="post">
         <a href="" name="code_btn" class="btn btn-success">Enter</a>
        </div>

I am trying to get each row in the table named "data" that has a username of $userLoggedIn, and display each result in its own bootstrap card.

Answer 1

mysqli_fetch_array just gives you the NEXT result, not all. You just have to fetch your results from the database until no more results are there, eg:

while (($data = mysqli_fetch_array($data_detail_query))) {
 /// ... do the output as above, e.g.:
 ?><a href="<?php echo $data['link']; ?>" class="card-link">Link</a><?php
}

And, by the way, make sure you don't produce an SQL injection hole here:

$user_details_query = mysqli_query($con, "SELECT * FROM users WHERE username='$userLoggedIn'" );
                                                                              ^^^^^^^^^^^^^^^^

Use either Prepared Statements or do a proper String quotation:

$userLoggedIn = $con->real_escape_string($userLoggedIn);
$user_details_query = mysqli_query($con, "SELECT * FROM users WHERE username={$userLoggedIn}" );