Растянутая ссылка

Сделайте любой HTML-элемент или компонент Bootstrap кликабельным, «растягивая» вложенную ссылку с помощью CSS.

Добавьте .stretched-link к ссылке, чтобы сделать ее содержащий блок доступным для кликов через псевдоэлемент ::after. В большинстве случаев это означает, что элемент с position: relative;, который содержит ссылку с классом .stretched-link, является интерактивным. Обратите внимание, учитывая как работает CSS position, .stretched-link нельзя смешивать с большинством элементов таблицы.

Карточки имеют в Bootstrap по умолчанию position: relative, поэтому в этом случае Вы можете безопасно добавить класс .stretched-link к ссылке в карточке без каких-либо других изменений HTML.

При растянутых ссылках не рекомендуется использовать несколько ссылок и целей касания. Однако некоторые стили position и z-index могут помочь, если это потребуется.

Карточка с растянутой ссылкой

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Карточка с растянутой ссылкой</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>

У медиа-объектов по умолчанию нет position: relative, поэтому нам нужно добавить здесь .position-relative, чтобы предотвратить растяжение ссылки за пределы медиа-объекта.

Пользовательский компонент с растянутой ссылкой

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 somewhere

<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-3" alt="...">
  <div>
    <h5 class="mt-0">Пользовательский компонент с растянутой ссылкой</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>

Столбцы с растянутой ссылкой

Go somewhere

<div class="row g-0 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 p-4 ps-md-0">
    <h5 class="mt-0">Столбцы с растянутой ссылкой</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>

Идентификация содержащего блока

Если растянутая ссылка не работает, причина может заключаться в содержащем блоке. Следующие свойства CSS сделают элемент содержащим блок:

A position отличное от static
A transform или perspective отличное от none
A will-change значение transform или perspective
A filter отличное от none или will-change изменяющее filter (работает только в Firefox)

Карточка с растянутой ссылкой

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.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Карточка с растянутой ссылкой</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>