Bootstrap Layout when using PHP Foreach - php

Question

I am currently displaying content from my database using a foreach loop within a boostrap panel. However the layout is not behaving as I expected it too, I have tried resolving this using breaks which had fixed the layout from being worse than it is at the present. However it is still off if you take a look at the image below :-
In addition to this I also have bootstrap dropdown menu's that are not working at all embedded within a div.
This is my code -
<div class="parabox">
<!-- Collect the nav links, forms, and other content for toggling -->
<!-- Search -->
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search For Comics">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<strong><p class="navbar-text">Sort Comics By : </p></strong>
<ul class="nav navbar-nav">
<li class="dropdown">
Order Comics<span class="caret"></span>
<ul class="dropdown-menu">
<li>Ascending Order</li>
<li>Descending Order</li>
<li>Numerical Order</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
Universe<span class="caret"></span>
<ul class="dropdown-menu">
<li>Dark Horse Comics</li>
<li>DC</li>
<li>IDW</li>
<li>Image</li>
<li>Marvel</li>
<li>Valiant</li>
</li>
</ul>
</div>
</div>
</br>
<!-- Start of Col Div -->
<div class="col-md-12">
<!--/.Panel for Comics -->
<!-- Count for Comics -->
<?php
if(count($comics)){
?>
</br>
<div class="panel panel-default">
<div class="panel-heading panel-heading-green">
<h3 class="panel-title">My Comics</h3>
</div>
<div class="panel-body">
<div class="row">
<!--/.row1 -->
<!-- Display each comic by id -->
<?php foreach($comics as $list): ?>
</br>
<div class="col-md-3 comic">
<a href="#">
<?= ($list['image'] <> " " ? "<img style='max-width:200px; max-height:250px;' src='Images/{$list['image']}'/>" : "") ?>
</a>
<div class="comic-title">
<?= ($list['name'] <> "" ? $list['name'] : "") ?> #<?= ($list['issue'] <> "" ? $list['issue'] : "") ?>
</div>
<div class="comic-add">
</div>
</div>
<!-- End of Foreach Statement for Comics -->
<?php endforeach; ?>
<!-- Else show this message if user has no entries -->
<?php
}else {
?>
<p><b>You haven't posted any comic yet!</b></p>
<?php } ?>
</div>
</div>
</div>
<!--/.row1-collapse -->
</div>
<!-- /.container -->
</div>
I am using MVC format which is why the code may seem short or missing pieces which is in header and footers within my template part of my application. Any ideas on what I can do to sort the layout out and get the dropdown menu's to work as they do seem a little related ?

Answer 1

As far as I know, bootstrap requires you to always have a markup like:
<div class="container">
<div class="row">
<div class="col-*">…</div>
<!-- many more cols -->
</div>
</div>
So this:
container
row
col
col
col
row
…
structure should always be give, whereby this structure can be nested.
This way the layout has all the negative margin magic applied
UPDATE
According to the posted image I guess that the resulting markup is corrupted (if the »container > row > col« structure exists). I recommend to have a a look at the browser console and compare the resulting dom tree with the expected. It is also very helpful to search the page source, in Firefox corrupted elements (missing closing tag, wrong attributes etc) are shown in red, so this helps to find the bug.

Answer 2

*Create a wrapper div to hold the image, title etc. Then for that div add a css with the style as display:inline-block; So if it is not able to accomodate with in the view in browser, it will get automatically wrapped into the next line. Follow this example see teh working sample code created by some one: http://jsfiddle.net/ajruk60t/3/*

Answer 3

You must break your line after the number of columns your row can contain. For instance, if you use col-3, then you must not define more than 4 columns. At this point, you recreate a row and carry on.
<div class="row">
<?php
$i = 1;
foreach($comics as $list) { ?>
<div class="col-md-3">
...
</div>
<?php
if ($i % 4 == 0) {
?></div><div class="row"><?php
}
$i++;
?>
<?php } ?>
</div>
Alternatively, you can create the same effect adding manual breakpoints rather than recreating a row. I have not tried this solution myself, but read it here:
<div class="clearfix visible-md-block"></div>

Answer 4

Thank you for your help it steered me to the answer which was the foreach loop had to start after the break.
<?php require('template/header.phtml') ?>
<div class="container">
<div class="row">
<!-- Start of Col Div -->
<div class="col-md-12">
<!--/.Panel for Comics -->
<!-- Count for Comics -->
<?php
if(count($comics)){
?>
</br>
<div class="panel panel-default">
<div class="panel-heading panel-heading-green"><h3 class="panel-title">My Comics</h3></div><!-- End of Panel Heading -->
<div class="panel-body">
<div class="row">
<!--/.row1 -->
<!-- Display each comic by id -->
</br> <?php foreach($comics as $list): ?>
<div class="col-md-3 comic">
<a href="#">
<?= ($list['image'] <> " " ? "<img style='max-width:200px; max-height:250px;' src='Images/{$list['image']}'/>" : "") ?>
</a>
<div class="comic-title">
<?= ($list['name'] <> "" ? $list['name'] : "") ?> #<?= ($list['issue'] <> "" ? $list['issue'] : "") ?>
</div>
<div class="comic-add">
</div>
</div> <!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<?php endforeach; ?>
<!-- Else show this message if user has no entries -->
<?php
}else {
?>
<p><b>You haven't posted any comic yet!</b></p>
<?php } ?>
</div><!-- end of row -->
</div> <!-- end of panel body -->
</div> <!-- end of panel panel-default -->
<!--/.row1-collapse -->
</div> <!-- end of col-md-12 -->
</div> <!-- End of Row -->
</div> <!-- /.container -->
<?php require('template/footer.phtml') ?>