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

Issue

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">
                <a href="product.php?cid=<?php echo $row['id']; ?>" class="btn btn-block buynow text-center" style="background: <?php echo $row['product_dec_colour']; ?>; color: <?php echo $row['product_section_colour']; ?>;">Buy Now</a>
                <a href="product.php?cid=<?php echo $row['id']; ?>" class="btn btn-block viewmore text-center" style="background: <?php echo $row['product_dec_colour']; ?>; color: <?php echo $row['product_section_colour']; ?>;">View More</a>
              </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;
    }

Solution

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

Answered By - Adabala Rama Krishna