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.

Recovery spa

A calm goal keeps your work organised wherever you are.

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">Recovery spa</h3>
    <p class="card-text small">A calm goal keeps your work organised wherever you are.</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.

tutorial

The smart goal checklist

May 13, 2026

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <span class="badge text-bg-light border mb-2">tutorial</span> 
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">The smart goal checklist</a></h3>
    <p class="small text-body-secondary mb-0">May 13, 2026</p>
  </div>
</div>

3Media object

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

Team notes for members

A bright update shows every detail in view all year round.

<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">Team notes for members</h3>
    <p class="small mb-1">A bright update shows every detail in view all year round.</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 modern dashboard brings customers coming back without the usual hassle.

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">A modern dashboard brings customers coming back without the usual hassle.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Nutrition guide

$158.99

Monthly pass

$160.00

Coaching plan

$118.00

<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">Nutrition guide</a></h3>
        <span class="fw-semibold">$158.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">Monthly pass</a></h3>
        <span class="fw-semibold">$160.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">Coaching plan</a></h3>
        <span class="fw-semibold">$118.00</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

The practical team checklist

just now

Inside the smart goal

22 hours ago

3 lessons from our launch

4 days ago

<div class="list-group">
  <div class="list-group-item d-flex gap-3">
    <span class="text-primary"><i class="bi bi-chat-left-dots" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">The practical team checklist</a>
      <p class="small text-body-secondary mb-0">just now</p>
    </div>
  </div>
  <div class="list-group-item d-flex gap-3">
    <span class="text-primary"><i class="bi bi-bell" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">Inside the smart goal</a>
      <p class="small text-body-secondary mb-0">22 hours ago</p>
    </div>
  </div>
  <div class="list-group-item d-flex gap-3">
    <span class="text-primary"><i class="bi bi-bag-check" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">3 lessons from our launch</a>
      <p class="small text-body-secondary mb-0">4 days ago</p>
    </div>
  </div>
</div>

7Team member cards

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

Kai Ibrahim

Sales Executive

Isla Duarte

Sales Executive

Nora Novak

Operations Manager

<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-6.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">Kai Ibrahim</a></h3>
        <small class="text-body-secondary">Sales Executive</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-4.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">Isla Duarte</a></h3>
        <small class="text-body-secondary">Sales Executive</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-2.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">Nora Novak</a></h3>
        <small class="text-body-secondary">Operations Manager</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

A guide to personal training

A focused update lets time back in your day in just a few clicks.

<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">A guide to personal training</a></h3>
        <p class="small mb-0 d-none d-sm-block">A focused update lets time back in your day in just a few clicks.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$25.81

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">$25.81</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.

Progress tracking

The new certified coaches makes projects moving forward wherever you are.

Flexible plans

The new community events shows the whole team on the same page for teams of every size.

Certified coaches

This flexible workflow guides you focused on what matters all year round.

<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" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Progress tracking</h3>
      <p class="small mb-0">The new certified coaches makes projects moving forward wherever you are.</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">Flexible plans</h3>
      <p class="small mb-0">The new community events shows the whole team on the same page for teams of every size.</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">Certified coaches</h3>
      <p class="small mb-0">This flexible workflow guides you focused on what matters all year round.</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-18.example/launch

Inside the friendly community

This smart goal shows projects moving forward at a fair price.

brand-name-18.example/journey

Clear ways to improve your journey

The new progress tracking connects decisions quicker and clearer from the very first day.

brand-name-18.example/journey

How we rebuilt our update

A fast launch keeps your work organised without extra tools.

<div class="vstack gap-3">
  <div class="position-relative">
    <small class="text-success">brand-name-18.example/launch</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Inside the friendly community</a></h3>
    <p class="small text-body-secondary mb-0">This smart goal shows projects moving forward at a fair price.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">brand-name-18.example/journey</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Clear ways to improve your journey</a></h3>
    <p class="small text-body-secondary mb-0">The new progress tracking connects decisions quicker and clearer from the very first day.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">brand-name-18.example/journey</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">How we rebuilt our update</a></h3>
    <p class="small text-body-secondary mb-0">A fast launch keeps your work organised 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">journey-35</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">goal-9</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">process-14</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" aria-hidden="true"></i></span><a href="#" class="stretched-link d-block small text-truncate link-body-emphasis text-decoration-none">team-24</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV12

How we rebuilt our routine

Valencia · 08:15

<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">12</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">How we rebuilt our routine</a></h3>
      <small class="text-body-secondary"><i class="bi bi-geo-alt" aria-hidden="true"></i> Valencia &middot; 08:15</small>
    </div>
  </div>
</div>

14Inbox rows

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

Kenji Brennan
Routine notes for members
20:15
Mia Duarte
Inside the modern routine
08:00
Kai Harlow
The flexible goal checklist
10:15

<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-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">Kenji Brennan</a><p class="small text-body-secondary mb-0">Routine notes for members</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-2.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">Mia Duarte</a><p class="small text-body-secondary mb-0">Inside the modern routine</p></div><small class="text-body-secondary text-nowrap">08:00</small></li>
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-5.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 Harlow</a><p class="small text-body-secondary mb-0">The flexible goal checklist</p></div><small class="text-body-secondary text-nowrap">10:15</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.

Recovery spa 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">Recovery spa</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.

Cardio

HIIT

Recovery

<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">Cardio</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">HIIT</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">Recovery</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

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

Recovery spa

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

18Clickable dashboard tiles

Metric tiles that open the matching report.

3.7k

Orders

4.1k

Visitors

6.2k

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" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            3.7k
          </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" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            4.1k
          </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" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            6.2k
          </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.

Operations ManagerPart time

Operations · Montreal

Customer SuccessRemote

Legal · Austin

Support SpecialistFull time

Design · Oslo

<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">Operations Manager</a><span class="badge text-bg-light border">Part time</span>
    </div>
    <small class="text-body-secondary">Operations &middot; Montreal</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">Customer Success</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-body-secondary">Legal &middot; Austin</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">Support Specialist</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-body-secondary">Design &middot; Oslo</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.

9 lessons from our goal

This practical project gives every detail in view from the very first day.

#insights

<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">9 lessons from our goal</a></h3>
    <p class="small">This practical project gives every detail in view from the very first day.</p>
    <a href="#" class="badge text-bg-primary text-decoration-none position-relative z-2">#insights</a> 
  </div>
</div>