Bootstrap cards in codeigniter Bootstrap cards in codeigniter codeigniter codeigniter

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:

  1. you don't need <tr> and <td> since you are not printing out HTML table
  2. in your image src attribute you are using $row->ReviewImage twice you can just omit $thisImage = $row->ReviewImage;
  3. 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>