How do i align 3 elements with bootstrap 4 according to my designs? - css

Question

I apply the rules of bootstrap but my buttons seems to go out of its alignment. my "Buy Now" and "View More" buttons should be place at the right side of the each sections. But i can seems to make it with bootstrap. I do not want to use Css to align it because i wanted it to be responsive. Can anyone enlighten me to help me out with my issues?
below here are my codes
<div class="container">
<div class="row" id="myDIV">
<?php
$sql = "SELECT * FROM products";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<section id="product-display" style="z-index: 1;background: linear-gradient(180deg, <?php echo $row['product_section_colour']; ?> 25.52%, rgba(42, 86, 147, 0) 100%);">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="top:-15px; left:-20px;">
<img style="height: 160px;width: 105px;left: -2px;top: -15px;border-radius: 0px;" loading="lazy" loading="lazy" id="product_img" src="images/product-main/<?php echo $row['product_photo']; ?>" alt="">
</div>
<div class="col-6 text-justify" style="position: absolute;height: 68px;left: 22%;right: 27.05%;">
<p style="color:<?php echo $row['product_dec_colour']; ?>;font-size:20px; padding-bottom:2px;font-weight: 600;"><?php echo $row['product_title']; ?></p>
<ul>
<li style="color:<?php echo $row['product_dec_colour']; ?>;font-size:7px;position: absolute;height: 68px;top: 35px;line-height: 8px;font-weight: 400;"><?php echo $row['product_desc']; ?></li>
</ul>
</div>
<div class="col-4">
Buy Now
View More
</div>
</div>
</div>
</section>
<?php
}
}
?>
</div>
this are my css
.buynow {
min-height: 32px;
background: #ffffff;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
border-radius: 5px;
font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 15px;
text-align: center;
width: 90px;
position: absolute;
top: 17px;
}
.viewmore {
min-height: 32px;
background: #ffffff;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
border-radius: 5px;
font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 15px;
text-align: center;
width: 90px;
position: absolute;
top: 58px;
}
section {
height: 107px;
width: 100%;
left: 0px;
top: 0px;
border-radius: 0px;
display: inline-block;
}
* {
padding: 0px;
margin: 0px;
}
ul li {
list-style-position: outside;
margin-left: 1em;
}

Answer 1

Why did you made "col-6" class as position:absolute? it will work if you remove that. you have used col-2,col-6,col-4 this is enough no need of position: absolute

Answer 2

I cannot run your code, but you can try with flex. Here is an example
<div class="d-flex">
<div class="col-4 mf-auto">
Buy Now
View More
</div>
</div>
You need to add mf-auto to your css file too.
This will help to align your content to the right side
.mf-auto {
margin-left: auto;
}