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

[sashavalentina]

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;
    }

This is what my page currently looks like with the codes above

 

and this is my design 

 

Edited March 10, 2022 by sashavalentina

[requinix]

You say you don't want to use CSS, but then you do things like

<div class="col-2" style="top:-15px; left:-20px;">

and

<div class="col-6 text-justify" style="position: absolute;height: 68px;left: 22%;right: 27.05%;">

which is very much the opposite of that.

If you are going to use Bootstrap for positioning then do not do your own positioning. Work with the system, not against it.