Basically what I need to do foreach three divs and show 5 services from the database.
I don't know how to do that. Can someone explain to me how? I try everything but just I have no idea how to do it. Second div should not be in row. Output be like on image link that I put below.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
<figcaption>
<h3>Service Title Goes Here 1</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
<figcaption>
<h3>Service Title Goes Here 2</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
</div>
<div class="col-lg-4 service-middle">
<div class="service-img service" style="background-image: url(images/image3.jpg); height: 600px; background-color: blue;">
<figcaption>
<h3>Service Title Goes Here 3</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
<figcaption>
<h3>Service Title Goes Here 4</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
<figcaption>
<h3>Service Title Goes Here 5</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hmm, I can't test this out yet but try to put this css; What it does is, were setting the height of .service-img.service to 50%. Then on the selector .service-middle>.service-img.service we're adding 100% height.
Do let me know if this worked and how it looked like on your screen. Thanks.
PS: dont run snippet, just use the css, bootstrap is not included.
.service-img.service {
height: 50%;
}
.height100{
height:100px;
}
.service-middle>.service-img.service{
height:100% !important;
}<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row height100">
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
<figcaption>
<h3>Service Title Goes Here 1</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
<figcaption>
<h3>Service Title Goes Here 2</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
</div>
<div class="col-lg-4 service-middle">
<div class="service-img service" style="background-image: url(images/image3.jpg); height: 618px; background-color: blue;">
<figcaption>
<h3>Service Title Goes Here 3</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
<figcaption>
<h3>Service Title Goes Here 4</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
<figcaption>
<h3>Service Title Goes Here 5</h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
Not really sure if the div.row should go in 2nd row, but I hope you get the idea. I'm just using a ternary operator to add the service-middle class: <?php echo $num == 2? 'sevice-middle' : '' ?>
<?php if ($num == 1): ?>
<div class="col-lg-4" <?php echo 'num= '.$num; ?> >
<?php endif ?>
<?php foreach ($services as $service): $num++; ?>
<div class="row">
<div class="sevice-img service <?php echo $num == 2? 'sevice-middle' : '' ?> " style="background-image: url(<?php echo 'images/'.$service['image']); ?>); height: 300px;">
<figcaption>
<h3><?php echo $service['title']; ?></h3>
</figcaption>
<a href="/detail.php"></a>
</div>
</div>
<?php endforeach ?>
<?php if ($num > 0): ?>
</div>
<?php endif ?>
The primary bug you are facing is this:
<?php if ($num == 1): ?>
should be
<?php if ($num === 1): ?>
For more info: