Bootstrap cards in codeigniter
Here is a default Bootstrap card template, Source:
<div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div></div>
Try this:
...<div class="row"> <?php foreach ($result as $row):?> <div class="card" style="width: 18rem;"> <img src="application/images/<?= $row->ReviewImage ?>" class="card-img-top" alt="<?= $row->GameName ?>"> <div class="card-body"> <h5 class="card-title"><?= $row->GameName ?></h5> <p class="card-text"><?= $row->GameBlurb . ' ' . $row->GameReview ?></p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <?php endforeach; ?> </div>...
Hope it helps.
Your code have some issues:
- you don't need
<tr>
and<td>
since you are not printing out HTML table - in your image src attribute you are using
$row->ReviewImage
twice you can just omit$thisImage = $row->ReviewImage;
- when using PHP in HTML template use Alternative syntax for control structures for more readability, to implement card in your app just follow documentation for bootstrap card, here is a suggested code:
<div class="container"> <div class="row"> <?php foreach ($result as $row): ?> <div class="card" style="width: 18rem;"> <img src="<?php echo '/games-rev/images/' . $thisImage; ?>" class="card-img-top" alt="title goes here" /> <div class="card-body"> <h5 class="card-title"><?php echo $row->GameName; ?></h5> <p class="card-text"> <?php echo $row->GameBlurb; ?> <?php echo $row->GameReview; ?> </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <?php endforeach; ?> </div></div>