Grid bootstrap containers side by side

Question

Grid bootstrap containers side by side

Navigation

#1 by (0 votes)

1

I'm doing a PHP project, and in it I have to display the products on the main screen once it's registered, it's displaying one below the other, but I want to show them side by side, by giving a float-right everything and moves all the products right, how can I solve this, follow my code.

if ($vetprodutos != null){
  // Percorre o vetor e insere o registro na tabela
  foreach ($vetprodutos as $produto) {
    $descricao = $produto["descricao"];
    $foto = $produto["foto"];
    $id_produto = $produto['id_produto'];
    $nome = $produto["nome"];
    $porcentagem_desconto = $produto['porcentagem_desconto'];
    $preco = $produto["preco"];
    $quantidade_estoque = $produto["quantidade_estoque"];
    $situacao = $produto["situacao"];
    echo'
      <div class="container">
        <div class="row">
          <div class="col-lg-5">
            <div class="row">
              <div class="col-lg-4 col-md-6">
                <div class="card h-100">
                  <a href="#"><img class="card-img-top" src="fotos/'.$foto.'"/ alt=""></a>
                  <div class="card-body">
                    <h4 class="card-title">
                      <a href="#">'.$nome.'</a>
                    </h4>
                    <h5>'.$preco.'</h5>
                    <p class="card-text">'.$descricao.'</p>
                    <small class="text-muted">Avaliação do cliente<br> &#9733; &#9733; &#9733; &#9734; &#9734;</small>
                  </div>
                  <a href="fotoCliente.php?id='.$id_produto.'" class ="btn btn-success">Descrição do produto</a>
                  <a href="$?id='.$id_produto.'" class ="btn btn-secondary">Adicionar ao carrinho</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


';

html css twitter-bootstrap

asked by anonymous 20.06.2018 / 07:13

1 answer

Retrieve information from an Android sharedPreference Date and time format in xls / csv conversion

score 0 · Answer 1

You can subdivide $vetprodutos into smaller arrays, for example, 3 elements each, and print 3 products per line, making sure that <div class="col-lg-X"> has X between 1 and 12 (the bootstrap lets you split the screen into 12 columns at most).

<?php
if ($vetprodutos != null) {
    $linhas = array_chunk($vetprodutos, 3);

    // Acrescentei um laço a mais porque array_chunk cria vetores dentro de um vetor.
    foreach ($linhas as $produtos) {

        $html = '';

        // Percorre o vetor e insere o registro na tabela
        foreach ($produtos as $produto) {
            $descricao = $produto["descricao"];
            $foto = $produto["foto"];
            $id_produto = $produto['id_produto'];
            $nome = $produto["nome"];
            $porcentagem_desconto = $produto['porcentagem_desconto'];
            $preco = $produto["preco"];
            $quantidade_estoque = $produto["quantidade_estoque"];
            $situacao = $produto["situacao"];

            $html += "
    <div class=""col-lg-4"">
        <p class=""card h-100"">
            <a href=""#""><img class=""card-img-top"" src=""fotos/{$foto}/"" alt=""""></a>
        </p>
        <p class=""card-body"">
            <h4 class=""card-title"">
                <a href=""#"">{$nome}</a>
            </h4>
            <h5>{$preco}</h5>
            <p class=""card-text"">{$descricao}</p>
            <p>
                <small class=""text-muted"">Avaliação do cliente<br /> &#9733; &#9733; &#9733; &#9734; &#9734;</small>
            </p>
            <p>
                <a href=""fotoCliente.php?id={$id_produto}"" class =""btn btn-success"">Descrição do produto</a>
                <a href=""$?id={$id_produto}"" class=""btn btn-secondary"">Adicionar ao carrinho</a>
            </p>
        </p>
    </div>";
        }

        echo "
<div class=""container"">
    <div class=""row"">
        {$html}
    </div>
</div>";
    }
}