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.

Physiotherapy

The new online results makes results you can measure without extra tools.

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">Physiotherapy</h3>
    <p class="card-text small">The new online results makes results you can measure without extra tools.</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.

insights

How we rebuilt our routine

May 11, 2026

<div class="card hp-hit" style="max-width:22rem">
  <div class="card-body">
    <span class="badge text-bg-light border mb-2">insights</span> 
    <h3 class="h6"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">How we rebuilt our routine</a></h3>
    <p class="small text-body-secondary mb-0">May 11, 2026</p>
  </div>
</div>

3Media object

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

4 lessons from our plan

The new family plans shows results you can measure from the very first day.

<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">4 lessons from our plan</h3>
    <p class="small mb-1">The new family plans shows results you can measure from the very first day.</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

Our general practice gives projects moving forward from the very first day.

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">Our general practice gives projects moving forward from the very first day.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Dental cleaning

$457.99

Annual check-up

$443.50

Physio session

$269.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">Dental cleaning</a></h3>
        <span class="fw-semibold">$457.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">Annual check-up</a></h3>
        <span class="fw-semibold">$443.50</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">Physio session</a></h3>
        <span class="fw-semibold">$269.00</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

Flexible ways to improve your community

just now

Powerful ways to improve your dashboard

14 hours ago

How we rebuilt our experience

2 days ago

<div class="list-group">
  <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">Flexible ways to improve your community</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-bag-check-fill" aria-hidden="true"></i></span>
    <div>
      <a href="#" class="stretched-link link-body-emphasis text-decoration-none fw-semibold small">Powerful ways to improve your dashboard</a>
      <p class="small text-body-secondary mb-0">14 hours ago</p>
    </div>
  </div>
  <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">How we rebuilt our experience</a>
      <p class="small text-body-secondary mb-0">2 days ago</p>
    </div>
  </div>
</div>

7Team member cards

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

Amara Duarte

Finance Lead

Ivy Brennan

HR Partner

Theo Ashford

Backend 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-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">Amara Duarte</a></h3>
        <small class="text-body-secondary">Finance Lead</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-3.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">Ivy Brennan</a></h3>
        <small class="text-body-secondary">HR Partner</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-8.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">Theo Ashford</a></h3>
        <small class="text-body-secondary">Backend Engineer</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

Elegant ways to improve your release

Our lab tests helps complex tasks into simple steps at a fair price.

<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">Elegant ways to improve your release</a></h3>
        <p class="small mb-0 d-none d-sm-block">Our lab tests helps complex tasks into simple steps at a fair price.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$17.90

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

Online results

The new certified specialists gives time back in your day all year round.

Certified specialists

The new online results turns you focused on what matters all year round.

Online results

Our lab tests turns complex tasks into simple steps 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-fill" aria-hidden="true"></i></span>
      <h3 class="h6 mt-2">Online results</h3>
      <p class="small mb-0">The new certified specialists gives time back in your day 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">Certified specialists</h3>
      <p class="small mb-0">The new online results turns 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 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">Online results</h3>
      <p class="small mb-0">Our lab tests turns complex tasks into simple steps 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-1.example/update

What's new in cardiology

The new insurance friendly turns you focused on what matters on any device.

brand-name-1.example/update

3 lessons from our experience

This powerful project shows decisions quicker and clearer without the usual hassle.

brand-name-1.example/community

What's new in pediatrics

This secure process helps projects moving forward at a fair price.

<div class="vstack gap-3">
  <div class="position-relative">
    <small class="text-success">brand-name-1.example/update</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">What&#39;s new in cardiology</a></h3>
    <p class="small text-body-secondary mb-0">The new insurance friendly turns you focused on what matters on any device.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">brand-name-1.example/update</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">3 lessons from our experience</a></h3>
    <p class="small text-body-secondary mb-0">This powerful project shows decisions quicker and clearer without the usual hassle.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">brand-name-1.example/community</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">What&#39;s new in pediatrics</a></h3>
    <p class="small text-body-secondary mb-0">This secure process helps projects moving forward at a fair price.</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-22</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">community-39</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">workflow-17</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">idea-1</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV17

Smart ways to improve your workflow

Porto · 07: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">17</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Smart ways to improve your workflow</a></h3>
      <small class="text-body-secondary"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Porto &middot; 07:15</small>
    </div>
  </div>
</div>

14Inbox rows

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

Samir Hughes
Inside the clear journey
19:00
Priya Quinn
The flexible team checklist
10:15
Mason Nguyen
The modern story checklist
18: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-9.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">Samir Hughes</a><p class="small text-body-secondary mb-0">Inside the clear journey</p></div><small class="text-body-secondary text-nowrap">19:00</small></li>
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-1.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">Priya Quinn</a><p class="small text-body-secondary mb-0">The flexible team checklist</p></div><small class="text-body-secondary text-nowrap">10:15</small></li>
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-12.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">Mason Nguyen</a><p class="small text-body-secondary mb-0">The modern story checklist</p></div><small class="text-body-secondary text-nowrap">18: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.

General practice 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">General practice</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.

Cardiology

Dental

Pediatrics

<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">Cardiology</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">Dental</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">Pediatrics</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

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

Physiotherapy

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

18Clickable dashboard tiles

Metric tiles that open the matching report.

716

Orders

386

Visitors

7.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-fill" aria-hidden="true"></i></span>
        <div>
          <div class="fs-5 fw-bold">
            716
          </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">
            386
          </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">
            7.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.

Project ManagerRemote

Finance · Kyoto

Data AnalystFull time

Operations · Barcelona

Backend EngineerRemote

Finance · Auckland

<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">Project Manager</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-body-secondary">Finance &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">Data Analyst</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-body-secondary">Operations &middot; Barcelona</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">Backend Engineer</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-body-secondary">Finance &middot; Auckland</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.

A guide to lab tests

The new insurance friendly lets every detail in view for teams of every size.

#community

<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">A guide to lab tests</a></h3>
    <p class="small">The new insurance friendly lets every detail in view for teams of every size.</p>
    <a href="#" class="badge text-bg-primary text-decoration-none position-relative z-2">#community</a> 
  </div>
</div>