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.

Airport transfers

Our car rental makes customers coming back on any device.

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">Airport transfers</h3>
    <p class="card-text small">Our car rental makes customers coming back on any device.</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.

community

6 lessons from our project

Aug 20, 2026

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <span class="badge text-bg-light border mb-2">community</span> 
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">6 lessons from our project</a></h3>
    <p class="small text-body-secondary mb-0">Aug 20, 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 mountain

This honest plan guides your work organised with friendly support.

<div class="d-flex position-relative gap-3 hp-hit p-2 rounded">
  <img src="../assets/img/photo-4.svg" alt="" width="120" height="80" class="rounded flex-shrink-0 object-fit-cover"> 
  <div>
    <h3 class="h6 mb-1">What&#39;s new in mountain</h3>
    <p class="small mb-1">This honest plan guides your work organised with friendly support.</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

The new flexible dates helps the whole team on the same page wherever you are.

Open article

<div class="row g-0 bg-body-tertiary rounded overflow-hidden">
  <div class="col-md-5">
    <img src="../assets/img/photo-6.svg" alt="" class="w-100 h-100 object-fit-cover" style="min-height:10rem">
  </div>
  <div class="col-md-7 p-3 position-relative hp-hit">
    <h3 class="h6">Only this column is clickable</h3>
    <p class="small">The new flexible dates helps the whole team on the same page wherever you are.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Island hopping tour

$435.99

Weekend getaway

$232.00

Ocean view suite

$63.99

<div class="row g-3">
  <div class="col-md-4">
    <div class="card h-100 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 text-decoration-none">Island hopping tour</a></h3>
        <span class="fw-semibold">$435.99</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100 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 text-decoration-none">Weekend getaway</a></h3>
        <span class="fw-semibold">$232.00</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100 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 text-decoration-none">Ocean view suite</a></h3>
        <span class="fw-semibold">$63.99</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

Journey notes for travellers

1 days ago

3 lessons from our team

1 days ago

The friendly experience checklist

27 min ago

<div class="list-group">
  <div class="list-group-item d-flex gap-3">
    <span class="text-primary"><i class="bi bi-bag-check-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">Journey notes for travellers</a>
      <p class="small text-body-secondary mb-0">1 days ago</p>
    </div>
  </div>
  <div class="list-group-item d-flex gap-3">
    <span class="text-primary"><i class="bi bi-bell-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">3 lessons from our team</a>
      <p class="small text-body-secondary mb-0">1 days ago</p>
    </div>
  </div>
  <div class="list-group-item d-flex gap-3">
    <span class="text-primary"><i class="bi bi-chat-left-dots-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">The friendly experience checklist</a>
      <p class="small text-body-secondary mb-0">27 min ago</p>
    </div>
  </div>
</div>

7Team member cards

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

Omar Rossi

Data Analyst

Elena Varga

Content Writer

Hana Sato

Frontend Engineer

<div class="row g-3">
  <div class="col-6 col-md-4">
    <div class="card text-center h-100">
      <div class="card-body">
        <img src="../assets/img/avatar-12.svg" alt="" width="72" height="72" class="rounded-circle mb-2">
        <h3 class="h6 mb-0"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Omar Rossi</a></h3>
        <small class="text-body-secondary">Data Analyst</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card text-center h-100">
      <div class="card-body">
        <img src="../assets/img/avatar-7.svg" alt="" width="72" height="72" class="rounded-circle mb-2">
        <h3 class="h6 mb-0"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Elena Varga</a></h3>
        <small class="text-body-secondary">Content Writer</small>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card text-center h-100">
      <div class="card-body">
        <img src="../assets/img/avatar-5.svg" alt="" width="72" height="72" class="rounded-circle mb-2">
        <h3 class="h6 mb-0"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Hana Sato</a></h3>
        <small class="text-body-secondary">Frontend Engineer</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

What's new in beach

Our holiday packages gives the whole team on the same page without extra tools.

<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-100 h-100 object-fit-cover">
    </div>
    <div class="col-8">
      <div class="card-body">
        <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis">What&#39;s new in beach</a></h3>
        <p class="small mb-0 d-none d-sm-block">Our holiday packages gives the whole team on the same page without extra tools.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$8.22

per month

Select Starter

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

10Feature tiles

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

Flexible dates

This clear plan brings new ideas to life all year round.

Free cancellation

A clear workflow lets every detail in view in just a few clicks.

Best price guarantee

This focused workflow makes new ideas to life without the usual hassle.

<div class="row g-3">
  <div class="col-md-4">
    <div class="position-relative border rounded-3 p-3 h-100">
      <span class="fs-3 text-primary"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Flexible dates</h3>
      <p class="small mb-0">This clear plan brings new ideas to life all year round.</p>
      <a href="#" class="stretched-link" aria-label="Learn more about this feature"></a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="position-relative border rounded-3 p-3 h-100">
      <span class="fs-3 text-primary"><i class="bi bi-shield-check" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Free cancellation</h3>
      <p class="small mb-0">A clear workflow lets every detail in view in just a few clicks.</p>
      <a href="#" class="stretched-link" aria-label="Learn more about this feature"></a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="position-relative border rounded-3 p-3 h-100">
      <span class="fs-3 text-primary"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Best price guarantee</h3>
      <p class="small mb-0">This focused workflow makes new ideas to life without the usual hassle.</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-6.example/story

Workflow notes for travellers

A practical story keeps decisions quicker and clearer from the very first day.

brand-name-6.example/workflow

What's new in culture

This focused idea connects new ideas to life at a fair price.

brand-name-6.example/project

Experience notes for travellers

Our car rental brings complex tasks into simple steps without extra tools.

<div class="vstack gap-3">
  <div class="position-relative">
    <small class="text-success">brand-name-6.example/story</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Workflow notes for travellers</a></h3>
    <p class="small text-body-secondary mb-0">A practical story keeps decisions quicker and clearer from the very first day.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">brand-name-6.example/workflow</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">What&#39;s new in culture</a></h3>
    <p class="small text-body-secondary mb-0">This focused idea connects new ideas to life at a fair price.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">brand-name-6.example/project</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Experience notes for travellers</a></h3>
    <p class="small text-body-secondary mb-0">Our car rental brings complex tasks into simple steps without extra tools.</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="position-relative border rounded p-3 text-center">
      <span class="fs-2 text-danger"><i class="bi bi-filetype-pdf" aria-hidden="true"></i></span><a href="#" class="stretched-link d-block small text-truncate link-body-emphasis text-decoration-none">story-11</a>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="position-relative border rounded p-3 text-center">
      <span class="fs-2 text-success"><i class="bi bi-filetype-xlsx" aria-hidden="true"></i></span><a href="#" class="stretched-link d-block small text-truncate link-body-emphasis text-decoration-none">team-16</a>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="position-relative border rounded p-3 text-center">
      <span class="fs-2 text-warning"><i class="bi bi-filetype-pptx" aria-hidden="true"></i></span><a href="#" class="stretched-link d-block small text-truncate link-body-emphasis text-decoration-none">update-37</a>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="position-relative border rounded p-3 text-center">
      <span class="fs-2 text-info"><i class="bi bi-file-earmark-image-fill" aria-hidden="true"></i></span><a href="#" class="stretched-link d-block small text-truncate link-body-emphasis text-decoration-none">workflow-33</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV1

How we rebuilt our story

Auckland · 12:45

<div class="card hp-hit" style="max-width:24rem">
  <div class="card-body d-flex gap-3">
    <div class="text-bg-primary rounded text-center px-3 py-2">
      <small class="d-block">NOV</small><strong class="fs-4">1</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">How we rebuilt our story</a></h3>
      <small class="text-body-secondary"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Auckland &middot; 12:45</small>
    </div>
  </div>
</div>

14Inbox rows

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

Kai Hughes
The focused workflow checklist
20:15
Lea Morgan
What's new in beach
08:45
Chloe Carter
Clear ways to improve your workflow
11:00

<ul class="list-group">
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-4.svg" alt="" width="36" height="36" class="rounded-circle"><div class="flex-grow-1"><a href="#" class="stretched-link text-decoration-none link-body-emphasis fw-semibold small">Kai Hughes</a><p class="small text-body-secondary mb-0">The focused workflow checklist</p></div><small class="text-body-secondary text-nowrap">20:15</small></li>
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-3.svg" alt="" width="36" height="36" class="rounded-circle"><div class="flex-grow-1"><a href="#" class="stretched-link text-decoration-none link-body-emphasis fw-semibold small">Lea Morgan</a><p class="small text-body-secondary mb-0">What&#39;s new in beach</p></div><small class="text-body-secondary text-nowrap">08:45</small></li>
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-6.svg" alt="" width="36" height="36" class="rounded-circle"><div class="flex-grow-1"><a href="#" class="stretched-link text-decoration-none link-body-emphasis fw-semibold small">Chloe Carter</a><p class="small text-body-secondary mb-0">Clear ways to improve your workflow</p></div><small class="text-body-secondary text-nowrap">11: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.

Car rental Open

<div class="card">
  <div class="card-body">
    <p class="small text-body-secondary">This text is outside the clickable area.</p>
    <div class="position-relative bg-body-tertiary rounded p-3 hp-hit">
      <strong class="d-block">Car rental</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.

Beach

Culture

Mountain

<div class="row g-2">
  <div class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="../assets/img/square-1.svg" alt="" class="w-100 object-fit-cover" style="height:9rem">
      <div class="position-absolute bottom-0 start-0 end-0 p-2" style="background:rgba(0,0,0,.5)">
        <a href="#" class="stretched-link link-light fw-semibold text-decoration-none">Beach</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="../assets/img/square-2.svg" alt="" class="w-100 object-fit-cover" style="height:9rem">
      <div class="position-absolute bottom-0 start-0 end-0 p-2" style="background:rgba(0,0,0,.5)">
        <a href="#" class="stretched-link link-light fw-semibold text-decoration-none">Culture</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="../assets/img/square-3.svg" alt="" class="w-100 object-fit-cover" style="height:9rem">
      <div class="position-absolute bottom-0 start-0 end-0 p-2" style="background:rgba(0,0,0,.5)">
        <a href="#" class="stretched-link link-light fw-semibold text-decoration-none">Mountain</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

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

Airport transfers

25% 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 text-decoration-none">Airport transfers</a></h3>
    <div class="progress mb-1" role="progressbar" aria-label="Course progress" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.5rem">
      <div class="progress-bar" style="width:25%">
      </div>
    </div>
    <small class="text-body-secondary">25% complete</small> 
  </div>
</div>

18Clickable dashboard tiles

Metric tiles that open the matching report.

646

Orders

4.8k

Visitors

956

Tickets

<div class="row g-2">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body d-flex align-items-center gap-3">
        <span class="fs-3 text-primary"><i class="bi bi-cart-fill" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            646
          </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 d-flex align-items-center gap-3">
        <span class="fs-3 text-primary"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            4.8k
          </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 d-flex align-items-center gap-3">
        <span class="fs-3 text-primary"><i class="bi bi-chat-square-text-fill" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            956
          </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.

Backend EngineerRemote

Sales · Auckland

Project ManagerFull time

Engineering · Kyoto

Content WriterRemote

Operations · Melbourne

<div class="list-group">
  <div class="list-group-item py-3">
    <div class="d-flex flex-wrap justify-content-between gap-2">
      <a href="#" class="stretched-link fw-semibold text-decoration-none">Backend Engineer</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-body-secondary">Sales &middot; Auckland</small>
  </div>
  <div class="list-group-item py-3">
    <div class="d-flex flex-wrap justify-content-between gap-2">
      <a href="#" class="stretched-link fw-semibold text-decoration-none">Project Manager</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-body-secondary">Engineering &middot; Kyoto</small>
  </div>
  <div class="list-group-item py-3">
    <div class="d-flex flex-wrap justify-content-between gap-2">
      <a href="#" class="stretched-link fw-semibold text-decoration-none">Content Writer</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-body-secondary">Operations &middot; Melbourne</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.

What's new in mountain

This secure project makes your work organised in just a few clicks.

#guide

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">What&#39;s new in mountain</a></h3>
    <p class="small">This secure project makes your work organised in just a few clicks.</p>
    <a href="#" class="badge text-bg-primary text-decoration-none position-relative z-2">#guide</a> 
  </div>
</div>