Proper alignment of thumbnails generated via php on bootstrap framework

Question

I want to divide my 12 column space in to two categories of 3 and 9 col width.on the first side i have some information and on second 9 columns width i want to display automatically generated content through php using mysql.Here is the first side First side code:

<div class="container">
    <div class="row col-md-12">
<div class="col-md-3">
<div class="well">some content</div>
<div class="well1">some content2</div>
</div>

Here is the second side automatically generated coded:

    <div class="col-md-9">


 <?php extract($_POST);
extract($_GET);
include "cw_admin/pageing.php";
$limit = 30;                                
if($page) 
$start = ($page - 1) * $limit;          
else
$start = 0;                     
$filePath="trending.php";
$select="select * from offers where trending='Yes' order by guid desc  Limit $start, $limit ";
$select1="select * from offers where trending='Yes'";
$result=mysql_query($select,$con);
$total=mysql_num_rows(mysql_query($select1,$con));
$otherParams="catid=$catid&shopid=$shopid"; 

        while ($row=mysql_fetch_assoc($result)) {
     $det=mysql_fetch_array(mysql_query("select * from category where id='$row[cat_id]'"));
     $shop=mysql_fetch_array(mysql_query("select * from shop where guid='$row[shopname]'"));?>
<div class="col-md-3">
<div class="thumbnail">

<?php if($shop[imagefile]!=''){?><img src="imagefiles/<?php echo $shop[imagefile];?>" class="img-responsive" "><?php } ?>

<div class="caption">
<h4 class="pull-right"><?php echo $row[rate];?></h4>
        <h4><?php echo $row[productname];?></h4>
 <p><?php echo $row[description];?></p>
         <p><?php if($row[offer_end]!='0000-00-00'){?>Offer Ends On: <?php echo $row[offer_end];}?></p>
        <p><?php if($row[coupon]!=''){?>Coupon Code:<?php echo $row[coupon];?><?php } ?></p>
 <?php 
                                 if($_SESSION[userid]!='')
                                { ?>
                                <a  href="<?php echo $row[main_url];echo "&";echo $row[affid];echo "&";echo $row[memid];echo "=";echo $details[userid];echo $row[deepid];?>"  target="_blank" class="btn btn-primary" > Earn <?php echo $row[value];?> Points</a>
                                <?php } 
                               else { ?>
                                <a  href="#1" data-toggle="modal" data-target="#myModal2" class="btn btn btn-primary" >Earn <?php echo $row[value];?> Cash</a>
                                <?php };
                                ?> 
</div>
</div>
</div>
<?php } ?>


</div>


</div>
</div>

I have two questions: 1)i gave 2 side as col-md-9 as outer and col-md-3 as inner but still in my output there are 4 items in the list.! 2)Even if a small increase in the height of thumbnail it results in removal of thumbnail in the next row.Pls i am a new bie help me in this..we got cheated by a designer so had to do everything again

Answer 1

A couple of issues and how to fix them:

1. There is an extra " in this line: <?php if($shop[imagefile]!=''){?><img src="imagefiles/<?php echo $shop[imagefile];?>" class="img-responsive" "><?php } ?> after the class="img-responsive". If you don't remove it, it's going to make a mess of things for sure.
2. If you have a column and you're nesting other columns inside it, you must add a row or you will have double padding. The row class adds negative 15px of margin left and right to negate the column padding of the column that the nested columns are inside. So, create another div with a class of row and wrap it around the col-md-3 div inside of your col-md-9 div. (See the diagram in my answer here if you need more of an explanation of this concept).
3. col-md-3 is going to give you 4 items in a row. That's how it works. The 3 refers to 3 columns of 12 (i.e., 12/3 = 4). If you only want to have 3 items in a row, make it: col-md-4.
4. Whether it's your image height or the difference in the number of lines of text, the columns use float: left. That means that if you have (for example) five columns where the second one is longer than the others, if they are each set to col-md-3, then your 5th column can't float all the way left on the next row, because the second column will be in the way. There are two simple ways to handle this:

a. Set the floating elements to have a fixed height. For example, in your case, you could give the thumbnail (or even the col-md-3) a fixed height.

b. Close the row after every grouping of columns that you want to appear in a single line so the elements never wrap. Closing the row and creating a new one clears the floats. So, for example, you could structure your code like this:

<div class="row">
  <div class="col-md-3">...</div> 
  <div class="col-md-3">...</div> 
  <div class="col-md-3">...</div> 
  <div class="col-md-3">...</div> 
</div> 
<div class="row">
  <div class="col-md-3">...</div> 
  <div class="col-md-3">...</div> 
  <div class="col-md-3">...</div> 
  <div class="col-md-3">...</div> 
</div> 

To accomplish the second option, you'd have to use a little php to check the length of your result set, then you can use two loops to create the markup for the row and the columns inside each row.