diff --git a/site/docs/4.1/utilities/stretched-link.md b/site/docs/4.1/utilities/stretched-link.md index c0c8940e10..5347307b53 100644 --- 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 %}
{% 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 %} -
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %} - -
-{% 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: