layout image:
I want to design bootstrap div layout as shown in this picture. I need to have to banner advertisement in the left and right corner. In the middle, I need to have dynamic div s which fetch data from database using PHP. But in the middle when I fetch data as dynamic divs, when number of records increases, the second banner advertisement goes down. How can I solve this?
<div class="col-lg-2" style="padding-top: 50px;">
<div class="card" >
<img src="img/cement_Ad.jpg" height="500" width="300">
</div>
</div>
<!-- 2 -->
<div class="col-lg-8" style="padding-left: 250px;">
<!-- 4 -->
<?php
$sql="select * from services ";
$result = $con->query($sql);
if ($result->num_rows > 0) {
?>
<?php
while($row = $result->fetch_assoc()) {
?>
<div class="col-lg-3" style="padding-top: 40px; padding-left: 20px;">
<section>
<div class="well" >
<div class="card" >
<div class="row ">
<div class="col-md-4">
<img src="img/img1.jpg" height="150px" width="120px">
</div>
<div class="col-md-8 px-3">
<div class="card-block px-3">
<h4 class="card-title"><?php echo $row ['name']; ?></h4>
<div >
<label>Email</label>
<?php echo $row ['email']; ?>
</div>
<div >
<label>Address</label>
<?php echo $row ['address']; ?>
</div>
<div >
<label>District</label>
<?php echo $row ['district']; ?>
</div>
<div >
<label>City</label>
<?php echo $row ['city']; ?>
</div>
<div >
<label>Service</label>
<?php echo $row ['service']; ?>
</div>
<div >
<label>Years of Experience</label>
<?php echo $row ['years']; ?>
</div>
<div>
<label>Details</label>
<?php echo $row ['details']; ?>
</div>
<a href="#" class="btn btn-success">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<?php
}
} else {
echo "0 results";
}
$con->close();
?>
</div>
<div class="col-lg-2" style="padding-top: 50px; ">
<div class="card" >
<img src="img/pipe_Ad.jpg" height="500" width="300">
</div>
</div>
This is the result after I used Mr.E-Azam's answer given below
