Make Bootstrap Card Entirely Clickable
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.
If you don't want to use anchor tags (don't want it to have the a tag restyle the card), you can use some custom js and styling. Something like this.
$(document).ready(() => {
$(document.body).on('click', '.card[data-clickable=true]', (e) => {
var href = $(e.currentTarget).data('href');
window.location = href;
});
});.card[data-clickable=true]{
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="card-deck flex-row flex-nowrap">
<div class="card" data-clickable="true" data-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">
<!-- THIS DIV IS NOT CLICKABLE BUT I WANT IT TO BE -->
<div class="card-body">
<h3 class="card-sub align-middle">Card Title</h3>
<p class="time-card">2 Days Ago</p>
</div>
<!-- END CARD-BODY -->
</div>
<!-- END CARD -->
</div>
<!-- END CARD DECK -->
</div>
<!-- END CONTAINER -->