MENU


Stretched links

You can make a Bootstrap component clickable by 'stretching' a nested link with:

.stretched-link

Add this class to an element to make its containing block (ie. parent element) clickable.

Below, the whole card and not just the 'Go somewhere' button will be clickable.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <div class="card" style="width: 18rem;">
      <img src="/shared/castle2.jpg" class="card-img-top" alt="castle 2">
      <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>

</body><html>