Make Bootstrap Card Entirely Clickable

Question

I'm having trouble making the entirety of my Bootstrap 4 Card clickable. I'm using HTML5 and Bootstrap 4 and cannot make the containing card clickable. The image and the text is clickable but I want a user to be able to click anywhere on the box. I have tried wrapping it with a link and the card looks clickable but it is not entirely. Help is appreciated

Codepen: https://codepen.io/anon/pen/PVNXgV

HTML

<div class="container">
  <div class="card-deck flex-row flex-nowrap">

    <div class="card">
      <a href="http://google.com"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Alberobello_BW_2016-10-16_13-43-03.jpg/250px-Alberobello_BW_2016-10-16_13-43-03.jpg" alt="Card image cap"></a>

      <a href="http://google.com">
        <!-- THIS DIV IS NOT CLICKABLE BUT I WANT IT TO BE -->
        <div class="card-body">
          <a href="http://google.com"><h3 class="card-sub align-middle">Card Title</h3></a>
          <p class="time-card">2 Days Ago</p>
        </div><!-- END CARD-BODY -->
      </a>
    </div><!-- END CARD -->

    </div><!-- END CARD DECK -->
</div><!-- END CONTAINER -->

CSS

.card-container{
  max-width:1400px;
  width:95%;
}

.card-body{
  max-width:250px;
  padding-left:10px;
  margin-top:0px;
  transition:.3s;
  -webkit-transition:.3s;
}

.card-deck{
  margin-bottom:3.2rem;
  display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.front-deck{
  padding-top:12rem;
}

.card{
  margin-right:16px;
  border:none;
  flex: 0 0 auto;
}

.card .card-body:first-of-type{
  border:2px solid #96cecf;
  border-top:0px; 
}

Answer 1

In Bootstrap 4, you could use stretched-link class, that won't change the color of the text in the card too.

Source: https://getbootstrap.com/docs/4.3/utilities/stretched-link/#identifying-the-containing-block

Example:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

Remember to add .position-relative to the parent class in most cases. See the link above for more info.