how to print div side by side with a foreach?

Question

how to print div side by side with a foreach?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have the following problem. I have this php code

function consultPro() {
        $db=Conexion::conectar();

        $sql=$db->query("SELECT producto.id_producto, producto.nombre, producto.id_categoria, datos_producto.precio, datos_producto.image, categoria_producto.categoria FROM producto INNER JOIN datos_producto ON producto.id_producto=datos_producto.id_producto INNER JOIN categoria_producto ON producto.id_categoria=categoria_producto.id_categoria");
        $sql->execute();

    // while ($row=$sql->fetch(PDO::FETCH_ASSOC)) {
    //   $fila=$row;
    // }
    return $sql;


    }

query execution

if(isset($_SESSION['id_cliente'])){
      $fila=consultPro(); 
 ?>

  <br>
    <?php foreach ($fila as $row) {
        # code...
     ?>
     <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-md-6">
           <div class="card flex-md-row mb-4 box-shadow h-md-250">
             <div class="card-body d-flex flex-column align-items-start">
                     <strong class="d-inline-block mb-2 text-primary"><?php echo $row['categoria']; ?></strong>
                     <h3 class="mb-0">
                       <a class="text-dark" href="#"><?php echo $row['nombre']; ?></a>
                     </h3>
                     <div class="mb-1 text-muted"> <h4 class="card-title pricing-card-title">BsF.<small class="text-muted"><?php echo $row['precio']; ?></small></h4></div>

                      <input type="button" class="btn btn-lg btn-block btn-outline-primary" value="Comprar">
                   </div>
                   <img width="300" height="300" class="card-img-right flex-auto d-none d-xs-block d-sm-block d-lg-block" src="<?php echo $row['image']; ?>" alt="Card image cap">
                 </div>
          </div>  
       </div>
   <?php } ?>
<?php 


} else{ header('location:index.php');}

but he throws me the div in the form of a list, that is, one under the other. but, I want to print two per row.

for styles, I use Bootstrap 4 . That's why I give it a width of 6. But I can not print two per row. How can I do it?

html5 php bootstrap

asked by Jdavid Barajas 16.07.2018 в 02:30

source

2 answers

Extract text from an html cell from Java WebView How to load datatable with ajax url mvc method

score 0 · Answer 1

Place the container div outside the foreach, in this way the container will not be repeated, inside the foreach.

<div class="container-fluid">
    <div class="row mb-2">
<?php foreach ($fila as $row) {
    # code...
 ?>     
  <div class="col-md-6">
       <div class="card flex-md-row mb-4 box-shadow h-md-250">
         <div class="card-body d-flex flex-column align-items-start">
           ......................
<?php } ?>
   </div>
</div>

score 0 · Answer 2

The problem is that you are cycling with everything and container, then you will always create one over another because they are all containers. Here you must remove the container of foreach . I leave the example a bit modified, concatenated everything in a chain and in the end I did echo

<?php 
if( isset( $_SESSION['id_cliente'] ) ){

    $fila=consultPro(); 
    $html = '
    <div class="container-fluid">
      <div class="row mb-2">';
    foreach ($fila as $row) {
        $html.='
        <div class="col-md-6">
          <div class="card flex-md-row mb-4 box-shadow h-md-250">
            <div class="card-body d-flex flex-column align-items-start">
              <strong class="d-inline-block mb-2 text-primary">'. $row['categoria'] .'</strong>
              <h3 class="mb-0"><a class="text-dark" href="#">'. $row['nombre'] .'</a></h3>
              <div class="mb-1 text-muted">
                <h4 class="card-title pricing-card-title">BsF.<small class="text-muted">'. $row['precio'] .'</small></h4></div>
              <input type="button" class="btn btn-lg btn-block btn-outline-primary" value="Comprar">
            </div>
            <img width="300" height="300" class="card-img-right flex-auto d-none d-xs-block d-sm-block d-lg-block" src="'.$row['image'].'" alt="Card image cap">
          </div>
        </div>';
   }
   $html.='  
    </div>
   </div>';

   echo $html;


} 

else{ 
  header('location:index.php');
}