Enlace estirado (Stretched link)

Haz que cualquier elemento HTML o componente Bootstrap sea seleccionable "estirando" un enlace anidado mediante CSS.

Agrega .stretched-link a un enlace para que su bloque contenedor sea seleccionable a través del pseudoelemento ::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 se vuelve seleccionable. Ten en cuenta que dado cómo funciona la propiedad position de CSS, .stretched-link no se puede mezclar con la mayoría de los elementos de tabla.

Las tarjetas (cards) tienen position: relative de forma predeterminada en Bootstrap, por lo que en este caso puedes agregar de forma segura la clase .stretched-link a un enlace en la tarjeta sin ningún otro cambio de HTML.

No se recomiendan múltiples enlaces y objetivos de toque con enlaces estirados. Sin embargo, algunos estilos de position y z-index pueden ayudar si esto es necesario.

Tarjeta con enlace estirado

Un texto de ejemplo rápido para construir sobre el título de la tarjeta y constituir 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">Tarjeta con enlace estirado</h5>
    <p class="card-text">Un texto de ejemplo rápido para construir sobre el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.</p>
    <a href="#" class="btn btn-primary stretched-link">Ir a algún lugar</a>
  </div>
</div>

La mayoría de los componentes personalizados no tienen position: relative de forma predeterminada, por lo que debemos agregar .position-relative aquí para evitar que el enlace se extienda fuera del elemento principal.

Componente personalizado con enlace estirado

Este es un contenido de marcador de posición para el componente personalizado. Está destinado a imitar cómo se vería el contenido del mundo real, y lo usamos 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">Componente personalizado con enlace estirado</h5>
    <p>Este es un contenido de marcador de posición para el componente personalizado. Está destinado a imitar cómo se vería el contenido del mundo real, y lo usamos aquí para darle al componente un poco de cuerpo y tamaño.</p>
    <a href="#" class="stretched-link">Ir a algún lugar</a>
  </div>
</div>

Columnas con enlace estirado

Otra instancia de contenido de marcador de posición para este otro componente personalizado. Está destinado a imitar cómo se vería el contenido del mundo real, y lo usamos 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">Columnas con enlace estirado</h5>
    <p>Otra instancia de contenido de marcador de posición para este otro componente personalizado. Está destinado a imitar cómo se vería el contenido del mundo real, y lo usamos aquí para darle al componente un poco de cuerpo y tamaño.</p>
    <a href="#" class="stretched-link">Ir a algún lugar</a>
  </div>
</div>

Identificación del bloque contenedor

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

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

Tarjeta con enlaces estirados

Un texto de ejemplo rápido para construir sobre el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

El enlace estirado no funcionará aquí, porque se agrega position: relative al enlace

Este enlace estirado solo se extenderá sobre la etiqueta p, porque se le aplica una transformación.

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Tarjeta con enlaces estirados</h5>
    <p class="card-text">Un texto de ejemplo rápido para construir sobre el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.</p>
    <p class="card-text">
      <a href="#" class="stretched-link text-danger" style="position: relative;">El enlace estirado no funcionará aquí, porque se agrega <code>position: relative</code> al enlace</a>
    </p>
    <p class="card-text bg-body-tertiary" style="transform: rotate(0);">
      Este <a href="#" class="text-warning stretched-link">enlace estirado</a> solo se extenderá sobre la etiqueta <code>p</code>, porque se le aplica una transformación.
    </p>
  </div>
</div>