CSS "stretching" nested links to make any HTML element or Bootstrap component clickable.

Add for link The stretched link class makes the block level element containing the link a clickable area through the:: after pseudo element. In most cases, this means that if a position: relative; Attribute contains an element with For links of the stretched link class, the modified element will become a clickable area. Note that given how CSS position works The stretched link class cannot be mixed with most table elements.

The card component in bootrap is set with the position: relative attribute by default, so in this case, you can safely add to the links contained in the card component Stressed link class, and there is no need to modify the HTML code.

Stretched links do not support multiple links and click targets. However, if necessary, you can do this by adding some position and z-index styles.

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

The media object component does not have the position: relative attribute set by default, so you need to add it yourself Position relative class to prevent link overflow outside the parent element.

<div class="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>This is some placeholder content for the media object. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

The column in the grid system is set to position: relative attribute by default. Therefore, if you want a column to be clickable, you only need to add it for its internal links Stressed link class. However, if you want to cover the entire row (.Row), you need to add Position static class, and add Position relative class.

<div class="row no-gutters bg-light position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <img src="..." class="w-100" alt="...">
  </div>
  <div class="col-md-6 position-static p-4 pl-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

1. Identify containing blocks

If the stretched link does not work, it may be caused by the block level element containing the link. The following CSS attributes make elements that contain stretched links block level elements:

• Set a value other than static for position
• Set values other than none for transform or perspective
• Set will change to transform or perspective
• Set the filter to a value other than none, or set will change to filter (Firefox browsers only)

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched links</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>
    <p class="card-text">
      <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
    </p>
  </div>
</div>

Postscript

If you feel that the article is not very good / / (ㄒ o ㄒ) //; o_O???
If you think the article is a little useful, you can give the author a compliment\*^ o^*//
If you want to make progress with the author, you can scan the QR code through wechat and pay attention to the old L in the front end~~~/// (^v^)\\~~~
Thank you readers (^ ^ ^) ∠※!!!