Hello,
I'm having a bit of trouble interpolating Bootstrap HTML from database rows. It's coming out kind of right, but I have font-awesome flags popping up everywhere, and my footer doesn't stretch the entire screen. Kind of like a div isn't being closed. I'd appreciate any help offered.
Every three items is a row. There are three columns per row.
PHP CODE
foreach($retrievedListings as $key => $val)
{
if($key === 0)
{
echo '<div class="row">
<div class="col-lg-4">
<div class="column-1">
<h4 style="color:darkblue;"><i style="color:yellow;" class="fa fa-star"></i> '.htmlentities($retrievedListings[$key]['title']).'</h4>
<p>By <strong>'.$retrievedListings[$key]['username'].'</strong><br/> '.htmlentities($retrievedListings[$key]['intro']).'</p>
<p class="word"><i class="fa fa-flag flag-button"></i>';
$tagsArr = explode(',', $retrievedListings[$key]['tags']);
foreach($tagsArr as $tag)
{
echo '<span class="label label-default label-buffer"><a>'.htmlentities($tag).'</a></span>';
}
echo '</p>
</div>
</div>';
}elseif($key % 3 != 0)
{
echo '<div class="col-lg-4">
<div class="column-1">
<h4 style="color:darkblue;"><i style="color:yellow;" class="fa fa-star"></i> '.htmlentities($retrievedListings[$key]['title']).'</h4>
<p>By <strong>'.$retrievedListings[$key]['username'].'</strong><br/> '.$retrievedListings[$key]['intro'].'</p>
<p class="word"><i class="fa fa-flag flag-button">';
$tagsArr = explode(',', $retrievedListings[$key]['tags']);
foreach($tagsArr as $tag)
{
echo '<span class="label label-default label-buffer"><a>'.htmlentities($tag).'</a></span>';
}
echo '</p>
</div>
</div>';
}else{
echo '</div>
<div class="row">
<div class="col-lg-4">
<div class="column-1">
<h4>'.htmlentities($retrievedListings[$key]['title']).'</h4>
<p>By <strong>'.$retrievedListings[$key]['username'].'</strong>
<br/> '.htmlentities($retrievedListings[$key]['intro']).'</p>
<p class="word"><strong>Tags :</strong> <span>One,Two,Three</span></p>
</div>
</div>';
}
}
What I'm trying to interpolate:
<div class="row">
<div class="col-lg-4">
<div class="column-1">
<h4 style="color:darkblue;"><i style="color:yellow;" class="fa fa-star"></i> Lorem Ipsum</h4>
<p>By <strong>Ipsum is simply</strong><br/>
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.</p>
<p class="word"><i class="fa fa-flag flag-button"></i><span class="label label-default label-buffer">playstation 4</span>
<span class="label label-default label-buffer">playstation 4</span><span class="label label-default label-buffer">playstation 4</span>
</p>
</div>
</div>
<div class="col-lg-4">
<div class="column-1">
<h4 style="color:darkblue;"><i style="color:yellow;" class="fa fa-star"></i> Lorem Ipsum</h4>
<p>By <strong>Ipsum is simply</strong><br/>
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.</p>
<p class="word"><i class="fa fa-flag flag-button"></i><span class="label label-default label-buffer">playstation 4</span>
<span class="label label-default label-buffer">playstation 4</span><span class="label label-default label-buffer">playstation 4</span>
</p>
</div>
</div>
<div class="col-lg-4">
<div class="column-1">
<h4 style="color:darkblue;"><i style="color:yellow;" class="fa fa-star"></i> Lorem Ipsum</h4>
<p>By <strong>Ipsum is simply</strong><br/>
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.</p>
<p class="word"><i class="fa fa-flag flag-button"></i><span class="label label-default label-buffer">playstation 4</span>
<span class="label label-default label-buffer">playstation 4</span><span class="label label-default label-buffer">playstation 4</span>
</p>
</div>
</div>
</div>
Thanks,
Jeremy.