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

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 >
  <div  id="myDIV">
    <?php
    $sql = "SELECT * FROM products";
    $query = $conn->query($sql);

    if (!mysqli_num_rows($query)) {
      echo '
    <div >
      <div >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 >
            <div >
              <div  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  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 >
                <a href="product.php?cid=<?php echo $row['id']; ?>"  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']; ?>"  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;
    }

CodePudding user response：

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

CodePudding user response：

I cannot run your code, but you can try with flex. Here is an example

<div >
   <div >
      <a href="product.php?cid=<?php echo $row['id']; ?>"  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']; ?>"  style="background: <?php echo $row['product_dec_colour']; ?>; color: <?php echo $row['product_section_colour']; ?>;">View More</a>
   </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;
}