### Stretched Link

Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.

Stretched-link on Bootstrap

##### Example

Add `.stretched-link` to a link to make its containing block clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable.
Cards have `position: relative` by default in Bootstrap, so in this case you can safely add the `.stretched-link` class to a link in the card without any other HTML changes.

Multiple links and tap targets are not recommended with stretched links. However, some`position` and `z-index` styles can help should this be required.

##### Card with stretched link

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

    <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="../../assets/img/generic/1.jpg" 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 class="btn btn-primary stretched-link" href="#">Go somewhere</a>
      </div>
    </div>

##### Identifying the containing block

If the stretched link doesn’t seem to work, the containing block will probably be the cause. The following CSS properties will make an element the containing block:

- A `position` value other than `static`
- A `transform` or `perspective` value other than `none`
- A `will-change` value of `transform` or `perspective`
- A `filter` value other than `none` or a `will-change` value of `filter` (only works on Firefox)

###### Card with stretched links

Some quick example text to build on the card title and make up the bulk of the card's content.

Stretched link will not work here, because `position: relative` is added to the link

This stretched link will only be spread over the `p`-tag, because a transform is applied to it.

    <div class="card shadow-lg" style="width: 18rem;"><img class="card-img-top" src="../../assets/img/generic/2.jpg" alt="..." />
      <div class="card-body">
        <h6 class="card-title fs-6">Card with stretched links</h6>
        <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>
        <p class="card-text"><a class="stretched-link text-info" href="#" style="position: relative;">Stretched link will not work here, because <code class="text-danger">position: relative</code> is added to the link</a></p>
        <p class="card-text bg-body-tertiary" style="transform: rotate(0);">This <a class="text-warning stretched-link" href="#">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.</p>
      </div>
    </div>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize