Vue Bootstrap Stretched link

Vue Stretched link - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

To use this component as a router-link, set the tag property: tag="router-link"

Card with stretched link

Use mdb-stretched-link and make its containing block clickable. In most cases, this means that an element with position: relative; that contains a mdb-stretched-link will be clickable.

Cards have position: relative; by default, so in this case you can safely nest the mdb-stretched-link without any other changes.

Multiple stretched links and tap targets within the same containing block are not recommended.

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

Show code

template
script

        
            
      <template>
        <mdb-container>
          <mdb-col md="4">
            <mdb-card>
              <mdb-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%286%29.jpg" alt="Card image cap"></mdb-card-image>
              <mdb-card-body>
                <mdb-card-title>Basic card</mdb-card-title>
                <mdb-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</mdb-card-text>
                <mdb-stretched-link href="#!" class="stretched-link">Go somewhere</mdb-stretched-link>
              </mdb-card-body>
            </mdb-card>
          </mdb-col>
        </mdb-container>
      </template>

        
            
        <script>
          import { mdbContainer, mdbCard, mdbCardImage, mdbCardBody, mdbCardTitle, mdbCardText, mdbStretchedLink, mdbCol } from 'mdbvue';
          export default {
            name: 'StretchedLinkPage',
            components: {
              mdbContainer,
              mdbCol,
              mdbCard,
              mdbCardImage,
              mdbCardBody,
              mdbCardTitle,
              mdbCardText,
              mdbStretchedLink
            }
          };
        </script>

Media with stretched link

Media objects do not have position: relative by default, so we need to add the .position-relative here to prevent the link from stretching outside the media object.

Media with stretched link

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Go somewhere

Show code

template
script

        
            
        <template>
          <mdb-media class="position-relative">
            <mdb-media-image src="https://mdbootstrap.com/img/Photos/Others/placeholder4.jpg" class="d-flex mr-3" alt="Generic placeholder image" />
            <mdb-media-body>
              <h5 class="mt-0 font-weight-bold">Media heading</h5>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
              vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
              congue felis in faucibus.
            </mdb-media-body>
            <mdb-stretched-link href="#!" class="stretched-link">Go somewhere</mdb-stretched-link>
          </mdb-media>
        </template>

        
            
        <script>
          import { mdbStretchedLink, mdbMedia, mdbMediaImage, mdbMediaBody } from 'mdbvue';
          export default {
            name: 'StretchedLinkPage',
            components: {
              mdbStretchedLink,
              mdbMedia,
              mdbMediaImage,
              mdbMediaBody, 
              mdbIcon
            }
          };
        </script>

Columns with stretched link

Columns' position is "relative" by default, so to make a column clickable, it's enough to nest mdb-stretched-link within. However, stretching a link over an entire .row would require .position-static on the column and .position-relative on the row.

Columns with stretched link

Go somewhere

Show code

template
script

        
            
        <template>
          <mdb-row>
            <mdb-col md="6">
              <img class="w-100" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" alt="image">
            </mdb-col>
            <mdb-col>
              <h5 class="mt-0">Columns with stretched link</h5>
              <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
                odio,
                vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                Donec
                lacinia congue felis in faucibus.</p>
              <mdb-stretched-link href="#!" class="stretched-link">Go somewhere</mdb-stretched-link>
            </mdb-col>
          </mdb-row>
        </template>

        
            
        <script>
          import { mdbStretchedLink, mdbCol, mdbRow } from 'mdbvue';
          export default {
            name: 'StretchedLinkPage',
            components: {
              mdbCol,
              mdbRow,
              mdbStretchedLink,
            }
          };
        </script>

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)