Link estendido

Torne qualquer elemento HTML ou componente Bootstrap clicável “esticando” um link aninhado via CSS.

Adicione .stretched-linka um link para tornar seu bloco contido clicável por meio de um ::afterpseudo elemento. Na maioria dos casos, isso significa que um elemento position: relative;que contém um link com a .stretched-linkclasse é clicável.

Os cartões têm position: relativepor padrão no Bootstrap, portanto, nesse caso, você pode adicionar a .stretched-linkclasse 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 positione z-indexestilos 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 lugar

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <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>
  </div>
</div>

Objetos de mídia não têm position: relativepor padrão, então precisamos adicionar .position-relativeaqui 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 em faucibus.

Ir a algum lugar

<div class="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>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.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

As colunas são position: relativepor padrão, portanto, as colunas clicáveis exigem apenas a .stretched-linkclasse em um link. No entanto, esticar um link em um todo .rowrequer .position-staticna coluna e .position-relativena linha.

Colunas com link esticado

Ir a algum lugar

<div class="row no-gutters bg-light position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <img src="..." class="w-100" alt="...">
  </div>
  <div class="col-md-6 position-static p-4 pl-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>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.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Identificando o bloco que contém

Se o link esticado não funcionar, o bloco que o contém provavelmente será a causa. As seguintes propriedades CSS farão de um elemento o bloco que o contém:

Um positionvalor diferente destatic
A transformou perspectivevalor diferente denone
Um will-changevalor de transformouperspective
Um filtervalor diferente de noneou um will-changevalor de filter(só funciona no Firefox)

Cartão com links esticados

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.

O link estendido não funcionará aqui, porque position: relativeé adicionado ao link

Esse link estendido só será espalhado pela p-tag, porque uma transformação é aplicada a ele.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <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>
  </div>
</div>