Grid bootstrap getting misaligned in panel with results brought from database

Question

I am displaying the result of a query in panels, only that they are getting misaligned, I want to show as ta in the image below only 1 below the other, the way this, generating a pyramide effect, follows code and image example:

 <div class="container">
 <?php
      while ($row = mysql_fetch_array($query_chamados)) {

        $var_chamado   = $row['CHAMADO'];
        $var_problema  = $row['PROBLEMA'];
        $var_descricao = $row['DESCRICAO'];
        $var_contato   = $row['CONTATO'];
        $var_telefone  = $row['TELEFONE'];
        $var_abertura  = $row['DATA_DE_ABERTURA'];
        $var_horasemab = $row['HORAS_EM_ABERTO'];
        $var_numloja   = $row['NUM_LOJA'];
        $var_area      = $row['AREA'];
        $var_setor     = $row['SETOR'];
        $var_tecnico   = $row['TECNICO'];
        $var_abertopor = $row['ABERTO_POR'];
        $var_status    = $row['STATUS'];
        $var_painel    = $row['PAINEL'];




echo"
<div class='row'>
  <div class='col-xs-4'>
    <div class='panel panel-danger'>
      <div class='panel-heading'>
        <h3 class='panel-title'>
          <h3>
              <font  color='#FFFFFF'>
               <a class='Modal' data-toggle='modal' data-target='#myModal'><span class='glyphicon glyphicon-info-sign' aria-hidden='true'></span></a>&nbsp;&nbsp;&nbsp;$var_chamado
              </font>";
              if( $var_painel == 1){
              echo"<a href='ciente.php?id=". $row['CHAMADO'] ."' class='EstouCiente'>CIENTE</a>";
                }

              echo"</h3>
        </h3>
      </div>
        <div class='panel-body'>
          <h5>
             ABERTO A 0$var_horasemab HORAS <br />
             TELEFONE : $var_telefone       <br />
             ABERTO POR: $var_abertopor     <br />
             LOJA: 0$var_numloja            <br />
          </h5>
      </div>
    </div>
  </div>";
     }
  echo"</div>";
 ?>

@Gabriel Sousa

echo"
<div class='row'>
  <div class='col-xs-4'>
    <div class='panel panel-danger'>
     <div class='panel-heading'>
        <h3 class='panel-title'>    
         <a href='informacao.php?id=". $row['CHAMADO'] ."' class='left'>
          <span class='glyphicon glyphicon-info-sign' aria-hidden='true'>
          </span>
         </a>";
if( $var_painel == 0){
  echo"<a href='ciente.php?id=". $row['CHAMADO'] ."' class='right'>CIENTE
        </a>";
    }
 echo" 
</h3>
  </div>
  <div class='panel-body'>
         <center>
           $var_chamado
         </center>
       </div>
    </div>        
  </div>";
    }
echo"</div>";
 ?>

@Matheus Godoi

<?php while ($row = mysql_fetch_array($query_chamados)) : ?>
<div class="row">

  <div class="col-xs-4">

  <div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title"></h3>
  </div>
  <div class="panel-body">

  </div>
</div>

</div>
<?php endwhile; ?>
</div>

Answer 1

bootstrep uses a grid system that a row (Row) can have up to 12 columns.

when you dola the loop while

it generates an x number of squares within a Row

each square uses column uses 4 Row spaces

while printing more than 3 Row outputs the limit value supported by a Row

you have to generate a logic for every 3 squares generated it beam the old Row and open a new

the code looks like this

<?php 
        $i = 0;
        $row = 0; // contador de quadrados inseridos na row
    ?>

        <div class="row">
        <?php while($i < 20) : ?>

        <?php
           if($row == 3){ 
// se dois quadrador for adicionado fecha a row e abre uma nova
                 echo '</div><div class="row"> ';
// como a row é nova o marcador zera
                 $row = 0;
               } ?>
              <div class="col-xs-4">
                  <div class="panel panel-danger">
                      <div class="panel-heading">
                        <h3 class="panel-title"></h3>
                      </div>
                      <div class="panel-body">
                      </div>
                  </div>
              </div>     

        <?php

        $row++; // incrementa 1 pois um quadrado foi adicionado a row
        $i++;

        endwhile; ?>

        </div>

Answer 2

Make sure there is none text-align: center in his css.

A tip: try to fix this echo PHP. Instead of treating HTML as a simple string, use it this way:

<?php while ($row = mysql_fetch_array($query_chamados)) : ?>

 //código HTML

<?php endwhile; ?>

Note: I may be in love (since I don’t know the whole context of your project) but since you are already using the mysql_fetch_array, it is not necessary to keep creating variables and assigning them the values of $Row;

Answer 3

Let’s go in pieces

Semantically the HTML is wrong

<h3 class='panel-title'>
          <h3>
              <font  color='#FFFFFF'>
               <a class='Modal' data-toggle='modal' data-target='#myModal'><span class='glyphicon glyphicon-info-sign' aria-hidden='true'></span></a>&nbsp;&nbsp;&nbsp;$var_chamado
              </font>";
              if( $var_painel == 1){
              echo"<a href='ciente.php?id=". $row['CHAMADO'] ."' class='EstouCiente'>CIENTE</a>";
                }

              echo"</h3>
        </h3>
      </div>

There’s an H3 inside another H3

it may not seem like it but it influences the way the browser will render it on the screen.

Another thing is the color

<font  color='#FFFFFF'>

HTML5 should be styled by CSS this form is obsolete.

Try to fix the code without PHP first, if it doesn’t even complicate,

then see if there is error using this site https://validator.w3.org

last place PHP.

I tried to organize only HTML

<div class='row'>
  <div class='col-xs-4'>
    <div class='panel panel-danger'>
      <div class='panel-heading'>
        <h3 class='panel-title'>
            <font  color='#FFFFFF'>
                   <a class='Modal' data-toggle='modal' data-target='#myModal'>
                        <span class='glyphicon glyphicon-info-sign' aria-hidden='true'></span>
                   </a>&nbsp;&nbsp;&nbsp;
              </font>              
              <a href="" class='EstouCiente'>CIENTE</a>
        </h3>
      </div>
      <div class='panel-body'>
          <h5>
             ABERTO A 0$var_horasemab HORAS <br />
             TELEFONE : $var_telefone       <br />
             ABERTO POR: $var_abertopor     <br />
             LOJA: 0$var_numloja            <br />
          </h5>
      </div>
    </div>
  </div>
 </div>