(bootstrap and php) How to create a row every 3 database records

Question

Guys, I have a template that has the following:

    <div class="row">

        <!-- INICIO -->
        <div class="col-md-4">
            Aqui vem uma imagem e o nome de um imóvel
        </div>

    </div>
        <!-- FIM -->

I am searching from the database some real estate, using Windows, but could be any other framework.

Then I need to do a foreach, so that goes through all the properties and every 3 properties I skip a row (create a new Row) and insert each property in a column.

How can I do that foreach?

I’m very much in doubt.

Thank you.

Answer 1

You can do something like this:

<?php $count = 0; ?>
<?php foreach($seus_imoveis as $imovel): ?>
    <?php if($count == 0): ?>
        <div class="row">
    <?php endif; ?>

    <div class="col-md-4">
        Aqui vem uma imagem e o nome de um imóvel
    </div>

    <?php $count+=1; ?>

    <?php if($count == 0): ?>
        </div>
    <?php endif; ?>

    <?php if($count==3) $count = 0; ?>

<?php endforeach; ?>

That way the first time will open the div row and at the end of the third will close it, so successively.

Answer 2

I ended up using the example of the following link:

https://stackoverflow.com/questions/40561301/loop-row-in-bootstrap-every-3-columns/42837768

Using the PHP array_chunk function that separates an array into multiple arrays.

Then iterating as follows:

@foreach($imoveis as $imoveisLinha)

        <div class="row">

            @foreach($imoveisLinha as $imovel)
                <!-- INICIO -->
                <div class="col-md-4">
                        <div class="imovel-exibicao thumbnail">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="faixa">
                                        <img src="img/imovel/ex.jpg" alt="" />
                                        <span class="faixa-padrao">Aluguel</span>
                                    </div>

                                    <div class="espacamento-imovel">
                                        <div class="titulo-imovel-ex">
                                            <a href="">Village Garavelo I - Casa 2 Quartos</a>
                                        </div>

                                        <div class="desc-imovel-ex">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum molestiae tempora ipsa laborum explicabo rerum, odit assumenda. Perferendis distinctio corporis quidem aperiam nobis, explicabo vero, sint animi perspiciatis, omnis ipsum!
                                        </div>

                                        <div class="preco-imovel-ex">
                                            R$ 100.000,00
                                        </div>

                                        <div class="localizacao-imovel-ex">
                                            Goiânia
                                        </div>

                                        <div class="mais-info">
                                            <a href="imovel" type="button" class="btn botao">Mais Informações</a>
                                        </div>

                                    </div>

                                    <div class="info-imovel-ex hidden-sm hidden-xs">
                                        <div class="row">
                                            <div class="icones-info">
                                                <div class="col-sm-3">
                                                    <div class="i-metros" data-toggle="tooltip" data-placement="top" title="Metros"> 123m²</div>
                                                </div>

                                                <div class="col-sm-3">
                                                    <div class="i-quartos" data-toggle="tooltip" data-placement="top" title="Quartos"> 3</div>
                                                </div>

                                                <div class="col-sm-3">
                                                    <div class="i-banheiros" data-toggle="tooltip" data-placement="top" title="Banheiros"> 3</div>
                                                </div>

                                                <div class="col-sm-3">
                                                    <div class="i-garagens" data-toggle="tooltip" data-placement="top" title="Garagens"> 1</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            @endforeach
        </div>
    @endforeach