Bootstrap gird loop results different heights

Question

I have this loop of a bootstrap grid and for some reason the heights of the results are outputting staggered with different heights? See image. The weird thing is that on my local server it's working fine. Maybe it's some conflict with my wordpress theme? I've tried multiple times to add a screenshot but it wont let me. If anyone sees any reason this code is doing this let me know.

<div class='container-fluid'>
    <div class='row'>
<?php
$host = "---------";
$username = "-------";
$password = "-----";
$db_name = "------";

$conn = mysqli_connect($host, $username, $password, $db_name);

if ($conn != true)
{
echo "No Connected!";
}


$category = $_POST['category'];
$location = $_POST['location'];
$cash = $_POST['cash'];

$sql = "select * from franchise where category like '%$category%' and location like '%$location%' and investment <= $cash";

$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
    echo "<div class='col-sm-4' style='padding: 15px;border-radius: 5px;'>"."<div style='border-style: solid; border-color: black; border-width: thin; padding: 15px; border-radius: 10px;'>".
          "<center><img src='".$row['image']."' width='200' height='200'><br>"."<a href='".$row['page_link']."'>".$row['name']."</a><br><p>"
          .$row['description']."</p><br><input style='width: 120px;
          height: 45px;
          background-color: orange;
          border-style: solid;
          border-color: red;
          border-width: thin;
          border-radius: 10px;
          color: white;' type='submit' value= '=> Request Info' ></center>
          </div>
          </div>";
    }
} else {
    echo "0 results";
}
$conn->close();

?>
</div>
 </div>

We'd need your OUTPUT html **and** details of which flavour of Bootstrap is being used by BS has had an equal height option for some time. — Paulie_D, Jul 24 '18 at 14:50
Ok I just added the screenshot output. If you refresh you should see it now. and here is my headers. Sorry should have added: — Dylano236, Jul 24 '18 at 14:51
**No code in comments please** - but - https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — Paulie_D, Jul 24 '18 at 14:55
Then the linked question has your answer. BS3 does not have an equal height option (as I recall). You'll need BS4 or flexbox. — Paulie_D, Jul 24 '18 at 15:04

score 0 · Answer 1 · answered Jul 24 '18 at 14:35

0

I think you forgot px in your <img> tag. Try <img src='".$row['image']."' width='200px' height='200px'

It also may be that your class='col-sm-4' scales with image height. So make sure that you transform all images to same height.

answered Jul 24 '18 at 14:35

Lukas

1,053
8
24

I'll try this give me a min. Thanks! – Dylano236 Jul 24 '18 at 14:39
humm adding px did not change anything. I know what you're saying but I think putting px does not matter in image tags as it works. But not 100% sure. Thanks for the help anyway. I think it may be some conflicting wordpress theme issue. – Dylano236 Jul 24 '18 at 14:45

Bootstrap gird loop results different heights

1 Answers1