Add a notes about multiple links/targets, remove multiple link example

diff --git a/site/docs/4.1/utilities/stretched-link.md b/site/docs/4.1/utilities/stretched-link.md
index c0c8940e10cb6ebede25975cb7464faa6758e968..5347307b53d7a8610e973fdde2cb2f00d4f605f8 100644 (file)
--- a/site/docs/4.1/utilities/stretched-link.md
+++ b/site/docs/4.1/utilities/stretched-link.md
@@ -9,6 +9,8 @@ Add `.stretched-link` to a link to make it's [containing block](https://develope
 
 Cards have `position: relative` by default in Bootstrap, so in this case you can safely add the `.stretched-link` class to a link in the card without any other HTML changes.
 
+Multiple links and tap targets are not recommended with stretched links. However, some `position` and `z-index` styles can help should this be required.
+
 {% capture example %}
 <div class="card" style="width: 18rem;">
   {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %}
@@ -51,28 +53,6 @@ Columns are `position: relative` by default, so clickable columns only require t
 {% endcapture %}
 {% include example.html content=example %}
 
-Multiple links can be added to elements with a stretched link, but their `z-index` must be increased to be become clickable.
-
-{% capture example %}
-<div class="card" style="width: 18rem;">
-  {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %}
-  <div class="card-body">
-    <h5 class="card-title">Card with multiple 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">The whole card will be linked to this link</a>
-    </p>
-    <p class="card-text">
-      <a href="#" class="text-danger">This link will be unclickable, because the previous link is stretched over this link</a>
-    </p>
-    <p class="card-text">
-      <a href="#" style="position: relative; z-index: 2;" class="text-success">This link will be clickable because <code>position: relative</code> is added and the z-index is higher than the z-index of the <code>::after</code> pseudo element of the stretched link</a>
-    </p>
-  </div>
-</div>
-{% endcapture %}
-{% include example.html content=example %}
-
 ## Identifying the containing block
 
 If the stretched link doesn't seem to work, the [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block) will probably be the cause. The following CSS properties will make an element the containing block: