Stretched link

Haz que cualquier elemento HTML o componente de Bootstrap sea clicable “estirando” un enlace anidado mediante CSS.

Añade .stretched-link a un enlace para hacer que su contenedor sea clicable mediante un pseudo elemento ::after. En la mayoría de los casos, esto significa que un elemento con position: relative; que contiene un enlace con la clase .stretched-link es clicable. Ten en cuenta que dado cómo funciona position en CSS, .stretched-link no se puede mezclar con la mayoría de los elementos de tabla.

Las cards tienen position: relative por defecto en Bootstrap, así que en este caso puedes añadir la clase .stretched-link a un enlace en la card de forma segura sin ningún otro cambio en el HTML.

No se recomiendan múltiples enlaces y objetivos táctiles con stretched links. Sin embargo, algunos estilos de position y z-index pueden ayudar si fuera necesario.

Card con stretched link

Algún texto de ejemplo rápido para construir sobre el título de la tarjeta y formar la mayor parte del contenido de la tarjeta.

Ir a algún lugar

html

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

La mayoría de los componentes personalizados no tienen position: relative por defecto, así que necesitamos añadir .position-relative aquí para evitar que el enlace se extienda fuera del elemento padre.

Componente personalizado con stretched link

Este es algún contenido de marcador de posición para el componente personalizado. Está destinado a imitar cómo se vería algún contenido del mundo real, y lo estamos usando aquí para darle al componente un poco de cuerpo y tamaño.

Ir a algún lugar

html

<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-3" alt="...">
  <div>
    <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>
  </div>
</div>

Columnas con stretched link

Otra instancia de contenido de marcador de posición para este otro componente personalizado. Está destinado a imitar cómo se vería algún contenido del mundo real, y lo estamos usando aquí para darle al componente un poco de cuerpo y tamaño.

Ir a algún lugar

html

<div class="row g-0 bg-body-secondary 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">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>
  </div>
</div>

Identificación del bloque contenedor

Si el stretched link no parece funcionar, el contenedor probablemente sea la causa. Las siguientes propiedades CSS harán que un elemento sea el contenedor:

Un valor de position distinto de static
Un valor de transform o perspective distinto de none
Un valor de will-change de transform o perspective
Un valor de filter distinto de none o un valor de will-change de filter (solo funciona en Firefox)

Card con stretched links

Algún texto de ejemplo rápido para construir sobre el título de la tarjeta y formar la mayor parte del contenido de la tarjeta.

El stretched link no funcionará aquí, porque se añade position: relative al enlace

Este stretched link solo se extenderá sobre la etiqueta p, porque se le aplica un transform.

html

<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-body-tertiary" 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>