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

{ {< /example >} }

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

{ {< /example >} }

{ {< example >} }

{ {< /example >} }

Identifying the containing block#

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:

• A position value other than static
• A transform or perspective value other than none
• A will-change value of transform or perspective
• A filter value other than none or a will-change value of filter (only works on Firefox)

{ {< example >} }

{ {< /example >} }