Bootstrap - Stretched link

This chapter discusses about the class .stretched-link provided by Bootstrap.

The .stretched-link class in Bootstrap is used to create a link that stretches to fill the entire parent container.

  • This class can be used on any element that can contain a link, such as a <div> or <a> element, to make the entire element clickable and act as a link.

  • Any element with position:relative and contains a link with the .stretched-link class is clickable.

  • The .stretched-link class cannot be mixed with most table elements.

  • This class can be safely added to cards as they have position:relative by default in Bootstrap.

  • Using stretched links with multiple links and tap targets is not advisable.

Card with stretched link

This is useful for cases where you want to make an entire section of content clickable, such as a card or a list item.

Let's see an example on the usage of the .stretched-link class in a card:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Bootstrap - Card</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Stretched link in a card</h4>
        <div class="card" style="width: 20rem;">
          <img src="/bootstrap/images/tutimg.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Stretched link in a card</h5>
            <p class="card-text">Here is an example that shows the entire card as a link. This is because of the .stretched-link class of Bootstrap.</p>
            <a href="#" class="btn btn-primary stretched-link">View</a>
          </div>
        </div>
    </body>
</html>

You need to add the .position-relative class to prevent the link from stretching outside the parent element, when custom components do not have position: relative by default.

Let's see an example on the usage of the .position-relative class:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Helper - Stretched link</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <h4>Custom component with stretched link</h4>
      <div class="d-flex position-relative">
        <img src="/bootstrap/images/tutimg.png" class="flex-shrink-0 me-3" alt="...">
        <div>
          <h5 class="mt-0">Custom component with stretched link using .position-relative</h5>
          <p>Here is an example showing the use of .position-relative class in a component that shows a stretched link usage.</p>
          <a href="#" class="stretched-link">View</a>
        </div>
      </div>
  </body>
</html>

Let's see one more example of the usage of the .position-relative class:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Helper - Stretched link</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <h4>Columns with stretched link</h4>
      <div class="row g-0 bg-body-secondary position-relative">
        <div class="col-md-4 mb-md-0 p-md-4">
          <img src="/bootstrap/images/tutimg.png" class="w-100" alt="...">
        </div>
        <div class="col-md-4 p-4 ps-md-0">
          <h5 class="mt-0">Columns with stretched link</h5>
          <p>Another example of strecthed link with .position-relative on this other custom component. You can use it here to give the component a bit of body and size.</p>
          <a href="#" class="stretched-link">View</a>
        </div>
      </div>
  </body>
</html>
Advertisements