Bootstrap row height change with individual div

Question

Bootstrap container has rows with col-lg-3 class. Over 100 articles are returned from a SQL query with different length of text. Each article (numbers as 1, 2, 3 etc) put on <div> tag individually. But my output as follows:

but I need

html with php code

<div class="container" >
<div class="row">
    <?php
        foreach ($value as $add) {
        echo "<div class='col-md-3'><p>";
        echo $add->article_item;   // column name is article_item
        echo "</p></div>";
    }
    ?>
</div>
</div>

score 1 · Accepted Answer · answered Feb 06 '16 at 10:49

You need to change the structure of the data - something like this will work:

<?php
  $articleContainer = array('', '', '', '');
  $count = 0;

  foreach($value as $add)
  {
    //this is called the Modulus operator if you have not seen it before
    switch ($count % 4) 
    {
      case 0:
          $articleContainer[0] .= '<p>'.$add->article_item.'</p>';
          break;
      case 1:
          $articleContainer[1] .= '<p>'.$add->article_item.'</p>';
          break;
      case 2:
          $articleContainer[2] .= '<p>'.$add->article_item.'</p>';
          break;
      case 3:
          $articleContainer[3] .= '<p>'.$add->article_item.'</p>';
          break;
      default:
          echo 'error';
    } 

    $count++;
  }
?>

<div class="container" >
<div class="row">
  <div class='col-md-3'>
    <?=$articleContainer[0]?>
  </div>
  <div class='col-md-3'>
    <?=$articleContainer[1]?>
  </div>
  <div class='col-md-3'>
    <?=$articleContainer[2]?>
  </div>
  <div class='col-md-3'>
    <?=$articleContainer[3]?>
  </div>
</div>
</div>

score 0 · Answer 2 · answered Feb 06 '16 at 10:53

Two possible ways to fix it 1. You need to close every<div class="row">after 4 col-lg-3 or col-md-3inside the container, because col-lg-3/col-md-3 has dynamic heights and 5th column will stack to the tallest column of the above row as it can't clear: left because of the height of the tallest column. 2. use jQuery Isotope or any similar plugin.

score 0 · Answer 3 · answered Feb 06 '16 at 11:00

You will have 4 col-md-3 containing as many col-md-12 as you want (articles 1,5,9.. in the first, articles 2, 6, 10... in the second, etc.)

<div class="col-md-3"> # $i % 4 === 1
 <div class="col-md-12"><p>Article 1</p></div>
 <div class="col-md-12"><p>Article 5</p></div>
 ...
</div>
<div class="col-md-3"> # $i % 4 === 2
 <div class="col-md-12"><p>Article 2</p></div>
 <div class="col-md-12"><p>Article 6</p></div>
 ...
</div>
<div class="col-md-3"> # $i % 4 === 3
 <div class="col-md-12"><p>Article 3</p></div>
 <div class="col-md-12"><p>Article 7</p></div>
 ...
</div>
<div class="col-md-3"> # $i % 4 === 0
 <div class="col-md-12"><p>Article 4</p></div>
 <div class="col-md-12"><p>Article 8</p></div>
 ...
</div>

This should work:

    <div class="container" >
<div class="row">
    <?php
        $i=0;
        $col1="<div class='col-md-3'>";
        $col2="<div class='col-md-3'>";
        $col3="<div class='col-md-3'>";
        $col4="<div class='col-md-3'>";
        foreach ($value as $add) {
          if($i % 4 === 1) {
            $col1 = $col1 ."<div class='col-md-12'><p>".$add->article_item."</p></div>";
          }
          if($i % 4 === 2) {
            $col2 = $col2 ."<div class='col-md-12'><p>".$add->article_item."</p></div>";
          }
          if($i % 4 === 3) {
            $col3 = $col3 ."<div class='col-md-12'><p>".$add->article_item."</p></div>";
          }
          if($i % 4 === 0) {
            $col4 = $col4 ."<div class='col-md-12'><p>".$add->article_item."</p></div>";
          }
          $i++;
        }
        $col1 = $col1 . "</div>";
        $col2 = $col2 . "</div>";
        $col3 = $col3 . "</div>";
        $col4 = $col4 . "</div>";
        echo $col1 . $col2 . $col3 . $col4;
    ?>
</div>

First, we init our 4 columns. Then, for every 4th elements (modulo), we add to the right column the article, contained in a col-md-12. And then, you close the div then echo them.

This is barely the same as @IaMaCuP 's solution (one uses arrays, the other uses strings, both uses modulo to reorder your data structure). However his may be clearer! — tomsihap, Feb 06 '16 at 11:04

score 0 · Answer 4 · edited Feb 14 '16 at 15:47

0

Please replace this code on above code

<div class="row">
    <?php

        for($i=0;$i<count($value);$i++) {

  if($i%4==0 && $i!=0)
  {
echo "</div><div class='row'>";
}


        echo "<div class='col-md-3'><p>";
     echo $value[$i];     // column name is article_item
        echo "</p></div>";
  
}
    ?>
</div>

edited Feb 14 '16 at 15:47

marc_s

732,580
175
1,330
1,459

answered Feb 06 '16 at 11:23

Ankesh Vaishnav

1

Bootstrap row height change with individual div

4 Answers4

Linked