Open In App

Bootstrap 5 Stretched link

Last Updated : 29 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
          rel="stylesheet">
    <script src=
    </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

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=
          rel="stylesheet">
    <script src=
    </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>


Output:

Bootstrap 5 Stretched link

Bootstrap 5 Stretched link

Reference: https://getbootstrap.com/docs/5.0/helpers/stretched-link/



Previous Article
Next Article

Similar Reads

ReactJS MDBootstrap Stretched Link Utilities
MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Stretched Link Utilities in ReactJS MDBootstrap. The Stretched Link Utilities is used to make a component and add a link to it. Syntax: &lt;a class="st
2 min read
React Suite Breadcrumb Used with Link in next/link
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Breadcrumb component is used for Navigation purposes. We can display the current page path and quickly return to the history page. Breadcrumbs can be used with Links also. This will help to add on all the fu
3 min read
React Suite Pagination Used with Link in next/link
React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React suite Pagination Used with Link in next/link. The pagination has a layout
3 min read
React Suite Nav Used with Link in next/link
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Nav Provides a list of various forms of navigation menus, which can be landscape and portrait layouts. Nav Items can be used with Links also. These can be used for any redirection. Syntax: &lt;Nav &gt; &lt;Nav.I
3 min read
How to Create HTML Link that does not Follow the Link ?
An HTML link, a hyperlink, connects one web page to another. Users who click an HTML link are taken to the corresponding web page. Web developers can link to text, images, and other media using HTML links. These are the following approaches: Table of Content Using the href Attribute with a Placeholder ValueUsing the href Attribute with an Empty Val
2 min read
How to hide admin login link to custom link of WordPress website ?
WordPress security is crucial for website owners. One effective way to enhance security is by customizing the login URL for your WordPress admin panel. In this article, we’ll explore how to hide the default login link and replace it with a custom one. In WordPress, the login URL is like this e.g. www.yourwebsite.com/wp-admin here this string /wp-ad
3 min read
How to make whole row in a table clickable as link in Bootstrap ?
Tables in Bootstrap can be formed either using traditional &lt;table&gt; tags or using the in-built 'grid' system. Earlier, &lt;table&gt; tags were often employed to designing grids for the sites, but nowadays with flexbox and table display properties in CSS, it is easier to just use divs. In the following examples, we'll see how to make a complete
3 min read
How to apply custom color to glyphicon icon embed within a link styled with Bootstrap ?
Given an HTML document with relevant Bootstrap glyphicon and the task is to apply the custom color to them. Approach: First, we need to assign the id attribute to the particular glyphicon which you need to customize by using CSS. We can apply the color property to the particular id and change the icon color by using a hex value or normal color. The
2 min read
Bootstrap 5 Alerts Link color
Bootstrap 5 Alerts Link Color class is used to set the color of the alert element. There are different kind of alerts that indicates different things, if there is a success then the color of the alert will be green, if it's a failure then it should show a red color alert. Each color of the alert represents something. Alert color should be its name,
3 min read
Create Button Like a Link with Bootstrap 5
Bootstrap 5 has various classes that can be used to create different elements with highly customizable styling. By using Bootstrap Classes, we can create a button that looks similar to the link. In this article, we will create a button that looks like a link with Bootstrap 5 classes. We will explore two different approaches with their Syntax, and p
2 min read