HTML Stretched Link In card does not stretch

36 Views Asked by At

Here is what I'm trying to achieve

Here is a skimmed version of my code that has added columns and rows from bootstrap

The code does not make a stretched link. It is just a normal button link

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

1

There are 1 best solutions below

1
Alpha1229 On

The problem was using bootstrap 4.0.0 that did not support stretched links Changed to 4.3.0 and it works perfectly