Create new Rows in Bootstrap according to the amount of items in the database with PHP

Asked

Viewed 77 times

-2

I need to create a new div class="row" when it reaches the limit of 12 columns, in my case I am using col-md-3. Therefore, the maximum items per column are 4.

<?php foreach ($data['palettes'] as $row): ?>
<div class="row">
    <div class="col-md-3">
        <div class="view-palette shadow p-3 mb-5 rounded clearfix">
            <div class="palette">
                <div class="spot color-1" style="background-color: #<?=$row->color1?> !important;"></div>
                <div class="spot color-2" style="background-color: #<?=$row->color2?> !important;"></div>
                <div class="spot color-3" style="background-color: #<?=$row->color3?> !important;"></div>
                <div class="spot color-4" style="background-color: #<?=$row->color4?> !important;"></div>
            </div>
            <div class="float-left mt-3">
                <a href="#" class="btn btn-light btn-sm">
                    <i class="fas fa-heart"></i> 0
                </a>
            </div>
        </div>
    </div>
</div>
<?php endforeach; ?>

The variable $data is only receiving data from the bank return $this->db->select("SELECT * FROM palettes");

Only that way I did, you’re creating a .row for each result that is coming from the database. How do I solve this ?

php twitter-bootstrap foreach
  • 2

    And if you remove the div with class row loop and use flexbox ? In case I would create a div out of the loop with the properties: display: flex; flex-wrap: wrap;

  • And the columns would look like? I’m still learning :(

  • Keeping the col-md-3 in the item, the flexbox will automatically organize without the need of class row

2 answers

2


Make the loop inside the <div class="row"> and use the class form-group <div class="col-md-3 form-group"> to add a space between the columns when and does not fit in the same Row.

Example:

<div class="row">
<?php foreach ($data['palettes'] as $row): ?>
    <div class="col-md-3 form-group">
        <div class="view-palette shadow p-3 mb-5 rounded clearfix">
            <div class="palette">
                <div class="spot color-1" style="background-color: #<?=$row->color1?> !important;"></div>
                <div class="spot color-2" style="background-color: #<?=$row->color2?> !important;"></div>
                <div class="spot color-3" style="background-color: #<?=$row->color3?> !important;"></div>
                <div class="spot color-4" style="background-color: #<?=$row->color4?> !important;"></div>
            </div>
            <div class="float-left mt-3">
                <a href="#" class="btn btn-light btn-sm">
                    <i class="fas fa-heart"></i> 0
                </a>
            </div>
        </div>
    </div>
<?php endforeach; ?>
</div>

-4

Very simple: your foreach is in the wrong place. A div She creates a new line and within that line will contain the elements, so her foreach should be placed within the div.row before the div.col-md-3

  • But a row supports up to 12 columns, in which case will create multiple columns of col-md-3, will extrapolate the row

  • That’s right, but how many records will there be in your database ?

  • you can limit your query in the database... so it will always come 4

  • Whatever you have, it’s unlimited?

  • yes. That’s right, let me see if I understood your need you will register several times put on this page Will you always show the last 4 registrations ? or will display all registered records ?

  • Like... I’ll always show EVERYTHING, only when it reaches the limit of 4 columns of 3 within ROW, it creates a new ROW

  • I get it. so I believe the bootstrap itself already solved the case when Oce do the foreach he will take the fifth element and play for line.. already tried to foreach inside the div.Row ?

  • Already, the way is to use, flex display msm equal the mano ali cited

  • Yes... If Voce really needs a new Row to be created then it has to be the same flex display

Show 4 more comments

Browser other questions tagged php twitter-bootstrap foreach

You are not signed in. Login or sign up in order to post.