Bootstrap 5 Stretched link
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" >w3wiki</ 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 Beginner </ p >< hr > Practice: < a href = "#" class = "stretched-link" > Problem of the Day </ a > </ div > </ div > </ div > </ body > </ html > |
Output:
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" >w3wiki</ 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 Beginner </ 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 > |
Output:
Reference: https://getbootstrap.com/docs/5.0/helpers/stretched-link/