Make Bootstrap Card Entirely Clickable

by

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="https://stackoverflow.com/questions/54404865/..." class="card-img-top" alt="https://stackoverflow.com/questions/54404865/...">
  <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.

Leave a Comment

techhipbettruvabetnorabahisbahis forumueduseduedueduseduseduedusedueduedu