Stretched link
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.
Os cartões têm position: relative
por padrão no Bootstrap, portanto, nesse caso, você pode adicionar a .stretched-link
classe com segurança a um link no cartão sem outras alterações no HTML.
Vários links e alvos de toque não são recomendados com links esticados. No entanto, alguns position
e z-index
estilos podem ajudar se isso for necessário.
Cartão com link esticado
Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.
Ir a algum lugarObjetos de mídia não têm position: relative
por padrão, então precisamos adicionar .position-relative
aqui para evitar que o link se estenda para fora do objeto de mídia.
Mídia com link esticado
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Go somewhereColumns are position: relative
by default, so clickable columns only require the .stretched-link
class on a link. However, stretching a link over an entire .row
requires .position-static
on the column and .position-relative
on the row.
Columns with stretched link
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Go somewhereIdentifying 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 thanstatic
- A
transform
orperspective
value other thannone
- A
will-change
value oftransform
orperspective
- A
filter
value other thannone
or awill-change
value offilter
(only works on Firefox)
Card with stretched links
Some quick example text to build on the card title and make up the bulk of the card's content.
Stretched link will not work here, because position: relative
is added to the link
This stretched link will only be spread over the p
-tag, because a transform is applied to it.