Stretched Link

A stretched link makes its whole containing block clickable, so a card, list row or tile behaves like one big link. The nearest parent with position: relative (such as a card or position-relative) decides how far the clickable area reaches.

1Card with a stretched button

The button link stretches over the whole card; the dashed outline marks the clickable area.

Education fund

A powerful routine lets decisions quicker and clearer for teams of every size.

Explore

<div class="card hp-hit" style="max-width:18rem">
  <img src="../assets/img/photo-2.svg" class="card-img-top" alt=""> 
  <div class="card-body">
    <h3 class="h6 card-title">Education fund</h3>
    <p class="card-text small">A powerful routine lets decisions quicker and clearer for teams of every size.</p>
    <a href="#" class="btn btn-primary btn-sm stretched-link">Explore</a> 
  </div>
</div>

2Card title as the link

Putting stretched-link on the title link makes the heading the accessible name of the whole card.

case study

How we rebuilt our experience

May 6, 2026

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <span class="badge text-bg-light border mb-2">case study</span> 
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis no-underline">How we rebuilt our experience</a></h3>
    <p class="small text-muted mb-0">May 6, 2026</p>
  </div>
</div>

3Media object

A d-flex row with position-relative so the link covers the image and the text.

What's new in environment

This modern routine makes decisions quicker and clearer wherever you are.

<div class="flex relative gap-4 hp-hit p-2 rounded-md">
  <img src="../assets/img/photo-4.svg" alt="" width="120" height="80" class="rounded-md shrink-0 object-cover"> 
  <div>
    <h3 class="h6 mb-1">What&#39;s new in environment</h3>
    <p class="small mb-1">This modern routine makes decisions quicker and clearer wherever you are.</p>
    <a href="#" class="stretched-link small">Continue reading</a> 
  </div>
</div>

4Column as the containing block

Grid columns are not positioned, so add position-relative to the column you want to be clickable.

Only this column is clickable

A calm community helps projects moving forward on any device.

Open article

<div class="row g-0 bg-surface-3 rounded-md overflow-hidden">
  <div class="col-md-5">
    <img src="../assets/img/photo-6.svg" alt="" class="w-full h-full object-cover" style="min-height:10rem">
  </div>
  <div class="col-md-7 p-4 relative hp-hit">
    <h3 class="h6">Only this column is clickable</h3>
    <p class="small">A calm community helps projects moving forward on any device.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Tree planting

$117.00

School kit

$94.00

Meal pack

$166.50

<div class="row g-3">
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-1.svg" class="card-img-top" alt="">
      <div class="card-body">
        <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">Tree planting</a></h3>
        <span class="font-semibold">$117.00</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-2.svg" class="card-img-top" alt="">
      <div class="card-body">
        <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">School kit</a></h3>
        <span class="font-semibold">$94.00</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-full hp-hit">
      <img src="../assets/img/product-3.svg" class="card-img-top" alt="">
      <div class="card-body">
        <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">Meal pack</a></h3>
        <span class="font-semibold">$166.50</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

List group items are already positioned, so each row is clickable with one stretched link.

The practical launch checklist

just now

Inside the modern journey

just now

Reliable ways to improve your story

just now

<div class="list-group">
  <div class="list-group-item flex gap-4">
    <span class="text-primary"><i class="bi bi-bag-check" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">The practical launch checklist</a>
      <p class="small text-muted mb-0">just now</p>
    </div>
  </div>
  <div class="list-group-item flex gap-4">
    <span class="text-primary"><i class="bi bi-bag-check" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">Inside the modern journey</a>
      <p class="small text-muted mb-0">just now</p>
    </div>
  </div>
  <div class="list-group-item flex gap-4">
    <span class="text-primary"><i class="bi bi-bell" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis no-underline font-semibold small">Reliable ways to improve your story</a>
      <p class="small text-muted mb-0">just now</p>
    </div>
  </div>
</div>

7Team member cards

Profile cards that open the member page from anywhere on the card.

Omar Sato

QA Engineer

Lucas Alvarez

Frontend Engineer

Noah Haddad

Backend Engineer

<div class="row g-3">
  <div class="col-6 col-md-4">
    <div class="card text-center h-full">
      <div class="card-body">
        <img src="../assets/img/avatar-11.svg" alt="" width="72" height="72" class="rounded-full mb-2">
        <h3 class="h6 mb-0"><a href="#" class="stretched-link link-body-emphasis no-underline">Omar Sato</a></h3>
        <small class="text-muted">QA Engineer</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card text-center h-full">
      <div class="card-body">
        <img src="../assets/img/avatar-11.svg" alt="" width="72" height="72" class="rounded-full mb-2">
        <h3 class="h6 mb-0"><a href="#" class="stretched-link link-body-emphasis no-underline">Lucas Alvarez</a></h3>
        <small class="text-muted">Frontend Engineer</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card text-center h-full">
      <div class="card-body">
        <img src="../assets/img/avatar-2.svg" alt="" width="72" height="72" class="rounded-full mb-2">
        <h3 class="h6 mb-0"><a href="#" class="stretched-link link-body-emphasis no-underline">Noah Haddad</a></h3>
        <small class="text-muted">Backend Engineer</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

A horizontal card layout with the stretched link in the body.

Reliable ways to improve your team

This practical process shows you focused on what matters from the very first day.

<div class="card overflow-hidden hp-hit">
  <div class="row g-0">
    <div class="col-4">
      <img src="../assets/img/photo-8.svg" alt="" class="w-full h-full object-cover">
    </div>
    <div class="col-8">
      <div class="card-body">
        <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis">Reliable ways to improve your team</a></h3>
        <p class="small mb-0 hidden sm:block">This practical process shows you focused on what matters from the very first day.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$8.32

per month

Select Starter

<div class="card border-primary hp-hit" style="max-width:18rem">
  <div class="card-body text-center">
    <h3 class="h6 uppercase text-primary">Starter</h3>
    <p class="display-6 mb-0">$8.32</p>
    <p class="small text-muted">per month</p>
    <a href="#" class="btn btn-outline-primary w-full stretched-link">Select Starter</a> 
  </div>
</div>

10Feature tiles

Bordered feature tiles made clickable with a position-relative wrapper.

Transparent reports

Our food relief gives projects moving forward without the usual hassle.

Volunteer network

The new local partners makes the whole team on the same page with friendly support.

Local partners

This bright idea keeps decisions quicker and clearer without extra tools.

<div class="row g-3">
  <div class="col-md-4">
    <div class="relative border rounded-lg p-4 h-full">
      <span class="text-2xl text-primary"><i class="bi bi-lightning-charge" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Transparent reports</h3>
      <p class="small mb-0">Our food relief gives projects moving forward without the usual hassle.</p>
      <a href="#" class="stretched-link" aria-label="Learn more about this feature"></a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative border rounded-lg p-4 h-full">
      <span class="text-2xl text-primary"><i class="bi bi-shield-check" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Volunteer network</h3>
      <p class="small mb-0">The new local partners makes the whole team on the same page with friendly support.</p>
      <a href="#" class="stretched-link" aria-label="Learn more about this feature"></a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative border rounded-lg p-4 h-full">
      <span class="text-2xl text-primary"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Local partners</h3>
      <p class="small mb-0">This bright idea keeps decisions quicker and clearer without extra tools.</p>
      <a href="#" class="stretched-link" aria-label="Learn more about this feature"></a>
    </div>
  </div>
</div>

11Search results

Each result block is one large target, handy on touch screens.

brand-name-11.example/update

Inside the reliable journey

A bright goal guides projects moving forward at a fair price.

brand-name-11.example/update

Goal notes for donors

A modern process brings results you can measure in just a few clicks.

brand-name-11.example/story

What's new in health

This bright experience helps you focused on what matters in just a few clicks.

<div class="vstack gap-4">
  <div class="relative">
    <small class="text-success">brand-name-11.example/update</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Inside the reliable journey</a></h3>
    <p class="small text-muted mb-0">A bright goal guides projects moving forward at a fair price.</p>
  </div>
  <div class="relative">
    <small class="text-success">brand-name-11.example/update</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Goal notes for donors</a></h3>
    <p class="small text-muted mb-0">A modern process brings results you can measure in just a few clicks.</p>
  </div>
  <div class="relative">
    <small class="text-success">brand-name-11.example/story</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">What&#39;s new in health</a></h3>
    <p class="small text-muted mb-0">This bright experience helps you focused on what matters in just a few clicks.</p>
  </div>
</div>

12File tiles

File cards in a drive view open the file from anywhere on the tile.

<div class="row g-2">
  <div class="col-6 col-md-3">
    <div class="relative border rounded-md p-4 text-center">
      <span class="text-3xl text-danger"><i class="bi bi-filetype-pdf" aria-hidden="true"></i></span><a href="#" class="stretched-link block small truncate link-body-emphasis no-underline">goal-5</a>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="relative border rounded-md p-4 text-center">
      <span class="text-3xl text-success"><i class="bi bi-filetype-xlsx" aria-hidden="true"></i></span><a href="#" class="stretched-link block small truncate link-body-emphasis no-underline">process-24</a>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="relative border rounded-md p-4 text-center">
      <span class="text-3xl text-warning"><i class="bi bi-filetype-pptx" aria-hidden="true"></i></span><a href="#" class="stretched-link block small truncate link-body-emphasis no-underline">process-36</a>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="relative border rounded-md p-4 text-center">
      <span class="text-3xl text-info"><i class="bi bi-file-earmark-image" aria-hidden="true"></i></span><a href="#" class="stretched-link block small truncate link-body-emphasis no-underline">goal-38</a>
    </div>
  </div>
</div>

13Event card with date block

A date badge, title and place in one clickable card.

NOV3

Powerful ways to improve your update

Denver · 18:15

<div class="card hp-hit" style="max-width:24rem">
  <div class="card-body flex gap-4">
    <div class="text-bg-primary rounded-md text-center px-4 py-2">
      <small class="block">NOV</small><strong class="text-xl">3</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis no-underline">Powerful ways to improve your update</a></h3>
      <small class="text-muted"><i class="bi bi-geo-alt" aria-hidden="true"></i> Denver &middot; 18:15</small>
    </div>
  </div>
</div>

14Inbox rows

Message rows where the sender link stretches across the full row.

Mateo Brennan
Inside the fast workflow
13:30
Isla Ashford
Inside the flexible experience
17:30
Felix Nguyen
Plan notes for donors
09:00

<ul class="list-group">
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-5.svg" alt="" width="36" height="36" class="rounded-full"><div class="grow"><a href="#" class="stretched-link no-underline link-body-emphasis font-semibold small">Mateo Brennan</a><p class="small text-muted mb-0">Inside the fast workflow</p></div><small class="text-muted whitespace-nowrap">13:30</small></li>
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-9.svg" alt="" width="36" height="36" class="rounded-full"><div class="grow"><a href="#" class="stretched-link no-underline link-body-emphasis font-semibold small">Isla Ashford</a><p class="small text-muted mb-0">Inside the flexible experience</p></div><small class="text-muted whitespace-nowrap">17:30</small></li>
  <li class="list-group-item list-group-item-action flex gap-4 items-start"><img src="../assets/img/avatar-8.svg" alt="" width="36" height="36" class="rounded-full"><div class="grow"><a href="#" class="stretched-link no-underline link-body-emphasis font-semibold small">Felix Nguyen</a><p class="small text-muted mb-0">Plan notes for donors</p></div><small class="text-muted whitespace-nowrap">09:00</small></li>
</ul>

15Limiting the clickable area

Only the inner box has position-relative, so the stretched link covers it and not the outer card.

This text is outside the clickable area.

Clean water Open

<div class="card">
  <div class="card-body">
    <p class="small text-muted">This text is outside the clickable area.</p>
    <div class="relative bg-surface-3 rounded-md p-4 hp-hit">
      <strong class="block">Clean water</strong> <a href="#" class="stretched-link small">Open</a> 
    </div>
  </div>
</div>

16Category image tiles

Image tiles with an overlay caption; the caption link opens the category.

Education

Relief

Environment

<div class="row g-2">
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="../assets/img/square-1.svg" alt="" class="w-full object-cover" style="height:9rem">
      <div class="absolute bottom-0 start-0 end-0 p-2" style="background:rgba(0,0,0,.5)">
        <a href="#" class="stretched-link link-light font-semibold no-underline">Education</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="../assets/img/square-2.svg" alt="" class="w-full object-cover" style="height:9rem">
      <div class="absolute bottom-0 start-0 end-0 p-2" style="background:rgba(0,0,0,.5)">
        <a href="#" class="stretched-link link-light font-semibold no-underline">Relief</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="relative rounded-lg overflow-hidden">
      <img src="../assets/img/square-3.svg" alt="" class="w-full object-cover" style="height:9rem">
      <div class="absolute bottom-0 start-0 end-0 p-2" style="background:rgba(0,0,0,.5)">
        <a href="#" class="stretched-link link-light font-semibold no-underline">Environment</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

A learning card that resumes the course from anywhere on the card.

Volunteer programs

30% complete

<div class="card hp-hit" style="max-width:20rem">
  <div class="card-body">
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis no-underline">Volunteer programs</a></h3>
    <div class="progress mb-1" role="progressbar" aria-label="Course progress" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.5rem">
      <div class="progress-bar" style="width:30%">
      </div>
    </div>
    <small class="text-muted">30% complete</small> 
  </div>
</div>

18Clickable dashboard tiles

Metric tiles that open the matching report.

8.3k

Orders

8.0k

Visitors

4.9k

Tickets

<div class="row g-2">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body flex items-center gap-4">
        <span class="text-2xl text-primary"><i class="bi bi-cart" aria-hidden="true"></i></span>
        <div>
          <div class="text-lg font-bold">
            8.3k
          </div>
          <a href="#" class="stretched-link small link-secondary">Orders</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body flex items-center gap-4">
        <span class="text-2xl text-primary"><i class="bi bi-people" aria-hidden="true"></i></span>
        <div>
          <div class="text-lg font-bold">
            8.0k
          </div>
          <a href="#" class="stretched-link small link-secondary">Visitors</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body flex items-center gap-4">
        <span class="text-2xl text-primary"><i class="bi bi-chat-square-text" aria-hidden="true"></i></span>
        <div>
          <div class="text-lg font-bold">
            4.9k
          </div>
          <a href="#" class="stretched-link small link-secondary">Tickets</a>
        </div>
      </div>
    </div>
  </div>
</div>

19Job listings

Job rows with the title as the stretched link and the details as plain text.

Content WriterRemote

Operations · Seoul

Art DirectorPart time

Legal · Porto

Content WriterRemote

Customer Support · Lisbon

<div class="list-group">
  <div class="list-group-item py-4">
    <div class="flex flex-wrap justify-between gap-2">
      <a href="#" class="stretched-link font-semibold no-underline">Content Writer</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-muted">Operations &middot; Seoul</small>
  </div>
  <div class="list-group-item py-4">
    <div class="flex flex-wrap justify-between gap-2">
      <a href="#" class="stretched-link font-semibold no-underline">Art Director</a><span class="badge text-bg-light border">Part time</span>
    </div>
    <small class="text-muted">Legal &middot; Porto</small>
  </div>
  <div class="list-group-item py-4">
    <div class="flex flex-wrap justify-between gap-2">
      <a href="#" class="stretched-link font-semibold no-underline">Content Writer</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-muted">Customer Support &middot; Lisbon</small>
  </div>
</div>

20Extra link above the stretched link

Give a second link position-relative and z-2 so it sits above the stretched area and stays clickable on its own.

The reliable dashboard checklist

This smart dashboard keeps data easy to understand without extra tools.

#tutorial

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis no-underline">The reliable dashboard checklist</a></h3>
    <p class="small">This smart dashboard keeps data easy to understand without extra tools.</p>
    <a href="#" class="badge text-bg-primary no-underline relative z-2">#tutorial</a> 
  </div>
</div>