Bootstrap 5 Stretched link

Last Updated : 29 Dec, 2022

Bootstrap 5 Stretched link is used to make any component clickable. Multiple links are not recommended. The card in bootstrap has position:relative by default, so we can easily add .stretched-link class to a link.

Bootstrap 5 Stretched link class:

stretched-link: It is added to <a> tag to make the whole component clickable.

Syntax:

<div class="card">
    ...
    <a href="#" class="btn stretched-link">...</a>
</div>

Example 1: The class stretched-link is added to <a> tag to make the whole component clickable.

HTML

<html> 
  
<head> 
    <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.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body>  
    <div class="text-center"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h2>Bootstrap 5 Stretched link</h2> 
    </div> 
    <br><br> 
    <div class="col d-flex justify-content-center"> 
        <div class="card w-25"> 
            <div class="card-body"> 
                <h3 class="card-title text-center  
                    text-success"> 
                    GFG 
                </h3> 
                <p class="card-text"> 
                    A computer science portal for geeks 
                </p><hr> 
                Practice:  
                <a href="#" class="stretched-link"> 
                    Problem of the Day 
                </a> 
            </div> 
       </div> 
    </div> 
</body> 
</html>

Output:

Bootstrap 5 Stretched link

Example 2: If a stretched-link does not work then it is because of a containing block,

HTML

<html> 
  
<head> 
    <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.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h2>Bootstrap 5 Stretched link</h2> 
    </div> 
    <br><br> 
    <div class="col d-flex justify-content-center"> 
        <div class="card w-25"> 
            <div class="card-body"> 
                <h5 class="card-title">GFG</h5> 
                <p class="card-text"> 
                    A computer science portal for geeks 
                </p> 
                <p class="card-text"> 
                    <a href="#" class="btn stretched-link text-danger"> 
                        Stretched link will not work here 
                    </a> 
                </p> 
                <p class="card-text bg-light text-success"> 
                    This <a href="#" class="btn stretched-link"> 
                        stretched link 
                    </a> will only work in this p tag. 
                </p> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>