How to put a layout for the search results of an input search that is inside echo?

Question

I need to put a layout in the search results of input search, I have a page that uses the layout of bootstrap 4 Cards, and I wanted the search results to be the same. This is the script I use in my other page layout:

<div class="container my-3">

    <div class="row">

        <?php foreach ($dadosUN as $UN): ?>

           <div class="col-12 col-md-6 col-lg-3 mb-3 mb-md-3">

                <div class="card">

                    <div class="img-container">

                      <a href="index.php?post=<?php echo $UN['title']?>"><img src="<?php echo $UN['capa']?>" alt="<?php echo $UN['alt']?>" class="card-img-top" id="imgUNcover"></a>

                    </div>

                    <div class="card-body">

                      <a href="index.php?post=<?php echo $UN['title']?>" class="card-title cardTitleLink"><h1 class="cardTitleUN"><?php echo $UN['title']?></h1></a>

                      <p class="card-text text-muted"><?php echo $UN['text']?></p>

                      <a href="index.php?post=<?php echo $UN['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>

                    </div>

                </div>

           </div>

       <?php endforeach; ?>

    </div>

</div>

I managed to make the search layout more or less similar, using this script:

<div class="container my-3">

    <div class="row">

    <div class='col-12 col-md-6 col-lg-3 mb-3 mb-md-3'>  

        <?php

        if(isset($_POST['pesquisar'])&&!empty($_POST['cxnome']))
        {
        $nome=$_POST['cxnome'];
        $stmt = $conn->prepare("select * from bn_publicacao where title like :letra");
        $stmt->bindValue(':letra', '%'.$nome.'%', PDO::PARAM_STR);
        $stmt->execute();
        $resultados = $stmt->rowCount();

          if($resultados>=1){


            while($reg = $stmt->fetch(PDO::FETCH_OBJ)){

            echo "<div class='card'>";

            echo "<div class='img-container'>";

            echo "<a href='index.php?post='"; 

            echo $reg->title." ";

            echo ">";

            echo "<img src='";

            echo $reg->capa." ";

            echo "'";

            echo "alt='";

            echo $reg->alt." ";

            echo "'";

            echo "class='card-img-top'";

            echo "id='imgUNcover'";

            echo ">";

            echo "</a>";

            echo "</div>";

            echo "<div class='card-body'>";

            echo "<a href='index.php?post='"; 

            echo $reg->title." ";

            echo "class='card-title cardTitleLink'>";

            echo "<h1 class='cardTitleUN'>";

            echo $reg->title." ";

            echo "</h1>";

            echo "</a>";

            echo "<p class='card-text text-muted'>";

            echo $reg->text." ";

            echo "</p>";

            echo "<a href='index.php?post='";

            echo $reg->title." ";

            echo "class='btn btn-outline-danger btn-sm'>";

            echo "Continue Lendo";

            echo "</a>";

            }

          }else{
            echo "Não existe usuario cadastrado";
            }

          }else{
            echo "Preencha o campo de pesquisa";
          }
          ?>

          </div>

        </div>

      </div>

    </div>

</div>

But it was very buggy, the layout only worked perfectly for the first result, the other cards were on top of each other, and the images were different from the image of the first card:

It would be right for them to stand next to each other, as in this image:

Can someone help me?

Answer 1

You need to get that div inside the while

<div class='col-12 col-md-6 col-lg-3 mb-3 mb-md-3'>