Generate a Row after 2 columns in bootstrap

Question

I managed to generate a way Row after two columns in bootstrap, but the result was not as needed.

I have it:

<?php
$sql_3 = mysql_query("SELECT id, razao_social, cep, cidade, uf, rua, numero, bairro, complemento, logo, CodCli FROM tb_empresas") or die(mysql_error());

if (@mysql_num_rows($sql_3) <= '0')
    {
    echo "";
    }
  else
    {
    while ($r_sql_3 = mysql_fetch_array($sql_3))
        {
        $id_empresa = $r_sql_3[0];
        $razao_social = $r_sql_3[1];
        $cep = $r_sql_3[2];
        $cidade = $r_sql_3[3];
        $uf = $r_sql_3[4];
        $rua = $r_sql_3[5];
        $numero = $r_sql_3[6];
        $bairro = $r_sql_3[7];
        $complemento = $r_sql_3[8];
        $logo = $r_sql_3[9];
        $cod_cli = $r_sql_3[10];
        $endereco = $rua . ", " . $numero . ", " . $bairro . ", " . $cidade . " - " . $uf;
        $endereco_exibe = substr($endereco, 0, 14);
        $sql_3_1 = mysql_query("SELECT telefone FROM tb_empresas_tel WHERE CodCli = '$cod_cli' AND id_emp = '$id_empresa' LIMIT 1") or die(mysql_error());
        if (@mysql_num_rows($sql_3_1) <= '0')
            {
            echo "";
            }
          else
            {
            while ($r_sql_3_1 = mysql_fetch_array($sql_3_1))
                {
                $telefone = $r_sql_3_1[0];
                $telefone_exibe = substr($telefone, 0, 9);
                }
            }

?>

    <div class="vc_col-lg-6">
        <article class="eltd-listing-list-item" id="<?php
        echo $id_empresa; ?>">
            <div class="eltd-listing-item-content">
                <a class="eltd-listing-item-image-link" href="#" title="#">
                                                            <img width="800" height="600" src="images/logos_clientes/<?php
        echo $logo; ?>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="<?php
        echo $razao_social; ?>" title="<?php
        echo $razao_social; ?>" />

                                                            <div class="icone_empresas_wrapper_mapa icone_empresas">
                                                                <a class="icone_empresas" href="#" style="background-color:#ff6936 !important;">
                                                                    <i class="flaticon-food item_opc_1_emp"></i>                
                                                                </a>
            </div>
            </a>

            <div class="eltd-listing-title-holder">
                <a href="#" title="#">
                    <h3 class="eltd-listing-title" style="font-family: 'Radikal-Bold'; text-transform: uppercase; margin: 10px 0 0 0;">
                        <?php
        echo $razao_social; ?>
                    </h3>
                </a>
            </div>

            <div class="categoria_exp">
                <a href="#">Categoria > Saúde > Clínica ondontológica</a>
            </div>

            <div class="empre_tel">
                <a href="#"><span><?php
        echo $telefone_exibe; ?>...</span> Ver telefone</a>
            </div>

            <div class="categoria"></div>
            <span class="eltd-listing-item-address">
                                                            <a href="#"><span><?php
        echo $endereco_exibe; ?> </span> ... Ver endereço</a>
            </span>
    </div>
    </article>
    </div>
    <?php
        }
    }

?>

Works properly.
But I need you to manage a Row after two columns, as the blocks are misaligned, because they do not contain the same information.

Has anyone seen anything, or has any idea for a help?

Answer 1

If you need one Row every two elements just count the amount of element.

In this case, if it is only every 2 elements you can use the comparator using the $X % 2 === 0. The operator % get the rest of the division, so we can use it to know if it’s par or is odd.

When we divide by 2 we will have the rest. If the rest is 0 is because it is disusable by 2 and so it is par. As long as you’re gone odd will remain 1. As in mathematics the division of 0 by any number is always 0 then the same applies, it will be considered par our system. ;P

To illustrate the operation of %, before you get it wrong:

14 % 3 => 2 (12, do 3*4, é o maior alcançado, sobrando 2)
2 % 2 => 0 (2, do 2*1, é o maior alcançado, sobrando 0)
7 % 2 => 1 (6, do 2*3, é o maior alcançado, sobrando 1)
29 % 5 => 4 (25, do 5*5,é o maior alcançado, sobrando 4)

Logica:

If the current element is par he starts the row (<div class="row">). As long as he’s odd or the last element par must close the row (</div>).

Then just add:

if($i %2 === 0){    
 echo '<div class="row">';
}

//...

if($i %2 !== 0 || count($array) === $i + 1){    
    echo '</div>';
}

See it working by clicking here.

That way if it goes par it will add to div and if not it will close, meanwhile if the par is the last element it will close as well.

Your code is long to make so few changes, they would be unnoticeable, so just add:

A $i at the beginning of the code:

<?php
// Acrescente um $i:
$i = 0;

At the end of the while add:

   <?php
   // Adicione:
   $i++;
}

Then in HTML you can add:

<?= ($i % 2 === 0) ? '<div class="row">' : '' ?>
   <div class="vc_col-lg-6">
   //....
   </div>
<?= ($i % 2 !== 0 || count($array) === $i + 1) ? '</div>' : '' ?>

The <?= in PHP 5.4+ is active by default, it is equal to <? echo, ternary comparator does the same as the if presented upstairs with less code.

---

Remarks:

That’s not in the question asked, but I think it’s important to say.

Do not use mysql_ migrate to the mysqli_, see here why.

Plus you’re always wearing:

$id_empresa = $r_sql_3[0];
$razao_social = $r_sql_3[1];
//...

I don’t see the point if you can just use it: $r_sql_3['id'] and $r_sql_3['razao_social'], if you really need all the content in one variable you could simply use the list(), that would have the same effect and without the mechanical work of repeating the excerpt.

while ($r_sql_3 = mysql_fetch_row($sql_3)){

  list($id_empresa, $razao_social, $cep, $cidade, $uf, $rua, $numero, $bairro, $complemento, $logo, $cod_cli) = $r_sql_3;

  //...

}