Bootstrap Row Height Change With Individual Div

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

Solution 1:

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

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

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

    $count++;
  }
?><divclass="container" ><divclass="row"><divclass='col-md-3'><?=$articleContainer[0]?></div><divclass='col-md-3'><?=$articleContainer[1]?></div><divclass='col-md-3'><?=$articleContainer[2]?></div><divclass='col-md-3'><?=$articleContainer[3]?></div></div></div>

Solution 2:

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.

Solution 3:

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.)

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

This should work:

<divclass="container" ><divclass="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 ($valueas$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.

Solution 4:

Please replace this code on above code

<divclass="row">
    <?php

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

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


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

Share