layout: docs title: Stretched link description: Make any HTML element or Bootstrap component clickable by "stretching" a nested link via CSS.
Add .stretched-link
to a link to make its containing block clickable via a ::after
pseudo element. In most cases, this means that an element with position: relative;
that contains a link with the .stretched-link
class is clickable. Please note given how CSS position
works, .stretched-link
cannot be mixed with most table elements.
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.
{{< example >}}
<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>
Most custom components do not have position: relative
by default, so we need to add the .position-relative
here to prevent the link from stretching outside the parent element.
{{< example >}}
<h5 class="mt-0">Custom component with stretched link</h5>
<p>This is some placeholder content for the 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>
{{< example >}}
{{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
<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>
If the stretched link doesn't seem to work, the containing block will probably be the cause. The following CSS properties will make an element the containing block:
position
value other than static
transform
or perspective
value other than none
will-change
value of transform
or perspective
filter
value other than none
or a will-change
value of filter
(only works on Firefox){{< example >}}
<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>