Stretched link
Bootstrap Stretched link
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.
Some quick example text to build on the card title and make up the bulk of the card's
content.Card with stretched link
<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.webp" 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>
<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
<template>
<mdb-media class="position-relative">
<mdb-media-image src="https://mdbootstrap.com/img/Photos/Others/placeholder4.webp" 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
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
<template>
<mdb-row>
<mdb-col md="6">
<img class="w-100" src="https://mdbootstrap.com/img/Photos/Others/images/43.webp" 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 thanstatic
- A
transform
orperspective
value other thannone
- A
will-change
value oftransform
orperspective
- A
filter
value other thannone
or awill-change
value offilter
(only works on Firefox)