Bootstrap css cards in neue Zeile nach 4 cards?

Hallo, ich suche nach einem Weg um bootstrap cards bzw cols nach 4 "umbrechen" zu lassen. Das hat den Grund das ich diese gerne durch eine while schleife erstellen lassen würde. Also würde es auch reichen das man nach jedem 4. col eine neue row beginnt. Hoffe da gibt es einen recht einfachen Weg ;)

Danke schonmal

Answer 1

[apachy]

Dafür gibt es doch das Grid in Bootstrap. Also ja eine eigene Row und da drin eben 4 Col-Container, die jeweils eine Card enthalten. Ist so auch in den Docs drin als Beispiel mit 2 Cards.

https://getbootstrap.com/docs/4.0/components/card/#using-grid-markup

Musst halt bei deiner Schleife bedenken, wenn du eine ungerade Anzahl hast, dass du sie nicht über deine Daten laufen lässt, sondern den nächst höhere Teiler von 4 und dann eben einen leeren Container renderst oder mit Offsets arbeitest, sofern du nicht möchtest, dass z.B. in einer Zeile dann nur zwei oder drei sind und die Größe sich dabei ändert.

Woher ich das weiß: Berufserfahrung – Softwareentwickler/Projektleiter seit 2012

Answer 2

[regex9]

Das Bootstrap-Grid lässt sich in bis zu 12 Spalten aufteilen (siehe Grid / Grid Options). Jede Zeile wird mit der Klasse row markiert. Die muss folglich nach jeder vierten Spalte beginnen.

Entweder, man rechnet sich die Anzahl an Spalten und Reihen zuvor aus und arbeitet dann mit verschachtelten Schleifen (for oder while) oder man lässt die array_chunk-Funktion und foreach-Schleifen diese Arbeit übernehmen.

<?php
  $numberOfColumns = 4;
  $columnWidth = 12 / $numberOfColumns;
  $cardRows = array_chunk($cards, $numberOfColumns);
?>
<?php foreach ($cardRows as $cardRow): ?>
  <div class="row">
  <?php foreach ($cardRow as $card): ?>
    <div class="col-<?= $columnWidth ?>"><!-- card content ... --></div>
  <?php endforeach; ?>
  </div>
<?php endforeach; ?>