Preciso criar uma nova div class="row"
quando atingir o limite de 12 colunas, no meu caso eu estou utilizando col-md-3
. Portanto, o máximo de itens por coluna são 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; ?>
A variável $data
só está recebendo os dados do banco return $this->db->select("SELECT * FROM palettes");
Só que dessa maneira que eu fiz, está criando uma .row
pra cada resultado que está vindo do banco de dados. Como resolvo isso ?
div
com a classerow
do laço e usarflexbox
? No caso criaria umadiv
fora do laço com as propriedades:display: flex; flex-wrap: wrap;
col-md-3
no item, oflexbox
irá organizar automaticamente sem a necessidade daclass row