Bootstrap Row Height Change With Individual Div
Solution 1:
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>
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.)
<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.
Solution 4:
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>
Post a Comment for "Bootstrap Row Height Change With Individual Div"