Here is what I'm trying to achieve
Here is a skimmed version of my code that has added columns and rows from bootstrap
这段代码并没有创建一个拉伸链接，它只是一个普通的按钮链接

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div class="row">
  <div class="card col-md-6">
    <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/43.webp" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card with stretched link</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="https://google.com" class="btn btn-primary stretched-link">Go somewhere</a>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>