In PHP how to print data in div from left-to-right and on words like flipkart

Question

I am creating a div structure for displaying data from db. In my case all are getting written else I was not able to print that data properly.

I have one main div (col-md-12) and in that I have added (col-md-4) I have fetch images from db like echo $img; in php so the images will come properly but they are not from left to right like they are displayed below on each div rather than inserting left to right, so my question is how to insert that div from left-to- right rather than below of each other

this is problem that i facing when i am fetch data from db

and what i want like this below img

this is i want when i insert data form db

This is my code

are you keeping `col-sm-12` and `col-md-4` inside the loop or outside? — Ali Zia, Jan 14 '16 at 06:12
This site is related to solve the code that you are facing issue in, not to provide the complete solution without knowing what you have tried so far. Kindly provide the code or better would be the jsfiddle. -1 form me. — Saiyan Prince, Jan 14 '16 at 06:40
as per your code, you are using col-md-4 outside the loop, check my answer second example with loop and try — devpro, Jan 14 '16 at 07:00
Welcome to Stack Overflow. I have fixed a few English issues with your post. I have also made the code image inline. Next time, please post the code as text. Please edit your post and show us your css. — Rohit Gupta, Jan 16 '16 at 07:22

score 0 · Accepted Answer · edited May 23 '17 at 11:44

Your HTML structure should be like that:

<div class="main">
    <div class="col-sm-12">
        <div class="col-sm-4">
            // image one
        </div>
        <div class="col-sm-4">
            // image two
        </div>
        <div class="col-sm-4">
            // image three
        </div>
    </div>
</div>

IF you are using HTML inside the loop than you can follow this:

<div class="main">
    <div class="col-sm-12">
    <?
    $i = 1;
    foreach ( yourloop ) {        
    ?>
        <div class="col-sm-4">
            // image one
        </div>
       <?
       // after every third record use clear div
       if($i == 3){
       ?>
          <div style="clear:both"></div>
       <?    
       $i = 1; // reassign the value
       }
    $i++;
    }
    ?>
    </div>
</div>

UPDATE 1:

Solution with your provided code:

<div class="main">
    <div class="col-sm-12">
    <?
    while ( yourloop ... ) {        
    ?>
        <div class="col-sm-4">
            // your stuff
        </div>
    <?       
    }
    ?>
    </div>
</div>

What i have changed?

you need to use <div class="col-sm-4"> inside your loop and you can also follow the second example with clear:both; div.

UPDATE 2 (For Future aspects):

For new designers and developers you must need to understand Basic grid layouts:

FROM Bootstrap Examples:

You can also follow this link getting information about the difference between bootstrap classes:

FROM other answer:

.col-xs = *Extra small devices (ie Phones) (<768px)
.col-sm = Small devices (ie Tablets) (≥768px)
.col-md = Medium devices (ie laptops, or small desktops) (≥992px)
.col-lg = Large devices (ie Desktops) (≥1200px)*

@DeooHirulkar: it just a basic idea to solve your issue, as my other friends, told u, plz share your code in your question, than we can easily produce a solution.... — devpro, Jan 14 '16 at 06:46
hello i have add my code image in above part of que as a img on( this is code details ) words — Deoo Hirulkar, Jan 14 '16 at 07:02

score 0 · Answer 2 · answered Jan 14 '16 at 06:30

Since this is bootstrap you can do this by keeping three images in a row.

Pseudocode

counter = 0
for i in images:
    if counter = 0:
        print "<div class = 'row'>"
    print "<div class='col-md-3'>"+i+"</div>"
    counter++;
    counter = counter % 3;
    if counter == 0:
        print "</div>"

score 0 · Answer 3 · answered Jan 14 '16 at 06:47

You could simply create blocks with the (CSS) style definition float:left; as in the example below:

<?php
    echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
     <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"de-de\" lang=\"de-de\" >
     <head>
     <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />
     <style type="text/css">
     ";
    echo '.panel { float:left; margin:4px; border:1px solid #999; }'.PHP_EOL;
    echo '.clear { clear:both; }'.PHP_EOL;
    echo 'H3 { font-size:0.8em; background-color: #666; color:white; margin:0 0 4px 0; font-weight:bold; text-align:center; }'.PHP_EOL;
    echo "</style>
     </head>
     <body>
     ";

    echo '<h2>Block 1</h2>';
    for ($xi=1; $xi<=5; $xi++) {
        echo '<div class="panel"><h3>Panel 1.'.$xi.'</h3><br />contents go here<br />contents go here<br />contents go here</div>';
    }
    echo '<div class="clear"></div>';

    echo '<h2>Block 2</h2>';
    for ($xi=1; $xi<=5; $xi++) {
        echo '<div class="panel"><h3>Panel 2.'.$xi.'</h3><br />contents go here<br />contents go here<br />contents go here</div>';
    }
    echo '<div class="clear"></div>';

    echo "</body>
     </html>
     ";         
?>

In PHP how to print data in div from left-to-right and on words like flipkart

3 Answers3