CODEWITHSUNDEEP
csstwitter-bootstrap-3rowvertical-alignmentmultiple-columns
rainerbrunotte
rainerbrunotte

Reputation: 907

Adjust Twitter Bootstrap 3.1.1 column row height depending on content of each column cell

With PHP I am outputting a set of results from a MySQL database. Each result (while row fetch array) should be displayed in a dedicated Twitter Bootstrap column (col-md-4, or col-md-3, whatever really).

<div class="container">
<div class="row">
<?php
$sql = "SELECT * FROM ....."; 
$query = mysqli_query($connect, $sql) or die (mysqli_error()); 
while ($row = mysqli_fetch_array($query)) { 
$content = $row["content"];
// output
echo '<div class="col-md-3">';
echo $content;
echo '</div>';
}
?>
</div>
</div>

However, since I have many results, many columns are created, which unfortunately are not aligned properly by Bootstrap. So if I have 6 results split into 6 col-md-3, a new row is "created" by Bootstrap after the first 3 results (obviously), but they are quite messed up:

|| Content1 || Content2 || Content3 ||
|| Content1 || Content2 || Content3 ||
|| Content1 || Content2 || --------
|| Content1 || --------    Content6 ||
   --------    Content5 || Content6 ||
|| Content4 || Content5 || Content6 ||
|| Content4 || Content5 || Content6 ||
|| Content4 || Content5 ||
|| Content4 ||

What I am looking for is this: row height or column height adjusted according to each result length, but adjusted for each row separately. And it needs to work for 3 columns, 4, 6, and so on:

|| Content1 || Content2 || Content3 ||
|| Content1 || Content2 || Content3 ||
|| Content1 || Content2 || -------
|| Content1 || 
   --------    --------    --------
|| Content4 || Content5 || Content6 ||
            || Content5 ||
            || Content5 ||
   --------    --------    --------
|| Content7 || Content8 || Content9 ||
   --------    --------    --------

What do I need to change in the Twitter Bootstrap 3.1.1 CSS? I have tried the display:table-cell; method suggested in other posts, but that only messes it up more (it adds all the colums into an endless horizontal row)

Upvotes: 1

Views: 493

Answers (1)

Richard Parker
Richard Parker

Reputation: 70

<?php
$sql = "SELECT * FROM ....."; 
$query = mysqli_query($connect, $sql) or die (mysqli_error()); 
while ($row = mysqli_fetch_array($query)) { 
$content = $row["content"];
// output
echo '<div class="col-md-3">';
echo $content;
echo '</div>';
}
?>

To

<?php
    $sql = "SELECT * FROM ....."; 
    $query = mysqli_query($connect, $sql) or die (mysqli_error());
    $count = 1;

    while ($row = mysqli_fetch_array($query)) { 
        $content = $row["content"];
        // output

        if ($count % 3 == 1) {

            echo '<row>';

        }

        echo '<div class="col-md-4">';
        echo $content;
        echo '</div>';

        $count = $count + 1;

        if ($count % 3 == 0) {

            echo '</row>

        }


    }
?>

This may not be the best way to get it done but it should work.

Basically the if statements are there so when the count reaches anything with a remainder of 1 . Like 7, 10, 13, etc will start the new row and then once the number is fully divisible by 3 then it will close the row.

So elements 0 - 3 will be on 1 row 4 - 7 on another one etc.

Upvotes: 0

Related Questions