Bootstrap - Stretched link

Creating a Stretched Link

Bootstrap provides a way to create stretched links using the .stretched-link class. A stretched link makes the whole element clickable, not just the link text.

<div class="card">
  <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="stretched-link">Go somewhere</a>
  </div>
</div>

You can use the stretched link on different elements, such as buttons, cards, and list groups.

<button type="button" class="btn btn-primary">
  Stretched button
  <a href="#" class="stretched-link"></a>
</button>

<div class="card">
  <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="stretched-link">Go somewhere</a>
  </div>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">
    Stretched link in list group
    <span class="stretched-link"></span>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    Another stretched link
    <span class="stretched-link"></span>
  </a>
</div>

The .stretched-link class is applied to an <a> or <span> element inside the container you want to make clickable. The stretched link will extend to cover the whole container, providing a larger hit area for users to interact with.

Stretched Link Utility Class

Bootstrap has a utility class called .stretched-link that lets you make stretched links. This class can be used on an <a> or <span> element inside the container you want to make clickable.

When you use the .stretched-link class on an element, it will position the element absolutely within its closest positioned ancestor. This means the link will cover the entire area of its container, making the whole container clickable, not just the link text.

To use the .stretched-link utility class, add it to the <a> or <span> element inside the container you want to make clickable.

<div class="card">
  <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="stretched-link">Go somewhere</a>
  </div>
</div>

The .stretched-link class only works on elements that have a positioned ancestor. If the container doesn't have a position set, you may need to add the position: relative; style to the container for the stretched link to work right.

Accessibility Considerations

When using stretched links in your Bootstrap project, make sure they are accessible to all users, including those who use assistive technologies like screen readers.

To make stretched links accessible, use proper ARIA (Accessible Rich Internet Applications) attributes. ARIA attributes give extra information about the link to assistive technologies, helping users understand the purpose and function of the link.

One key ARIA attribute for stretched links is aria-label. This attribute provides a label for the link that is read by screen readers. It's useful when the link doesn't contain any text, like when you use an icon as the link.

<a href="#" class="stretched-link" aria-label="Read more about this topic">
  <i class="fas fa-arrow-right"></i>
</a>

Another accessibility consideration for stretched links is providing alternative text for images used as links. If your stretched link contains an image, include an alt attribute that describes the image and the link's purpose.

<a href="#" class="stretched-link">
  <img src="example.jpg" alt="Click to learn more about this example">
</a>