CODEWITHSUNDEEP
phpmysqlsqltwitter-bootstraploops
user3448317
user3448317

Reputation: 65

How to display 4 columns continuously in a loop with Bootstrap and SQL query

I want to display 4 images result of a SQL query for each row with Bootstrap. How can I do it with a loop in PHP?

<div class="row">
   <?php 
        $query = "SELECT * FROM table WHERE nombre='x' ORDER BY nombre";
        $consulta = mysql_query($query, $conexion);

        while ($data = mysql_fetch_assoc($consulta)) { ?>

        <div class='col-md-3 portfolio-item'>
            <a href='img/<?php echo $data['imagen']; ?>'>
                <img class='img-responsive' src='img/<?php echo $data['imagen']; ?>' alt='<?php echo $data['nombre']; ?>'>
            </a>
            <div class='panel panel-default'>
                <div class='panel-body'>
                    <?php echo $data['nombre']; ?>
                </div>
            </div> 

        </div> 
    <?php } ?> 
</div>

Upvotes: 1

Views: 2721

Answers (1)

Sougata Bose
Sougata Bose

Reputation: 31749

Close and open a new row - 

    <div class="row">
       <?php 
            $query = "SELECT * FROM table WHERE nombre='x' ORDER BY nombre";
            $consulta = mysql_query($query, $conexion);
            $i = 1;
            while ($data = mysql_fetch_assoc($consulta)) { ?>

            <div class='col-md-3 portfolio-item'>
                <a href='img/<?php echo $data['imagen']; ?>'>
                    <img class='img-responsive' src='img/<?php echo $data['imagen']; ?>' alt='<?php echo $data['nombre']; ?>'>
                </a>
                <div class='panel panel-default'>
                    <div class='panel-body'>
                        <?php echo $data['nombre']; ?>
                    </div>
                </div> 

            </div> 
        <?php 
            if($i % 4 === 0) echo "</div><div class='row'>"; // close and open a div with class row

            $i++; // increment
        } 
        ?> 
    </div>

Upvotes: 2

Related Questions