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.

Car rental

Clear prices, honest advice and no surprises along the way.

Explore

<div class="card hp-hit" style="max-width:18rem">
  <img src="https://images.unsplash.com/photo-1783443076547-fb9cb67224a0?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt=""> 
  <div class="card-body">
    <h3 class="h6 card-title">Car rental</h3>
    <p class="card-text small">Clear prices, honest advice and no surprises along the way.</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

Our favourite small hotels this year

Nov 6, 2025

<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">Our favourite small hotels this year</a></h3>
    <p class="small text-body-secondary mb-0">Nov 6, 2025</p>
  </div>
</div>

3Media object

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

The small habits that make a big difference

Family rooms, adults-only retreats and pet-friendly stays in one search.

<div class="d-flex position-relative gap-3 hp-hit p-2 rounded">
  <img src="https://images.unsplash.com/photo-1584467541268-b040f83be3fd?auto=format&fit=crop&w=1200&h=800&q=70" alt="" width="120" height="80" class="rounded flex-shrink-0 object-fit-cover"> 
  <div>
    <h3 class="h6 mb-1">The small habits that make a big difference</h3>
    <p class="small mb-1">Family rooms, adults-only retreats and pet-friendly stays in one search.</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

We measure success by how many travellers come back and tell their friends.

Open article

<div class="row g-0 bg-body-tertiary rounded overflow-hidden">
  <div class="col-md-5">
    <img src="https://images.unsplash.com/photo-1606922183036-62e19495eaab?auto=format&fit=crop&w=1200&h=800&q=70" 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">We measure success by how many travellers come back and tell their friends.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Vineyard stay

$226.00

Northern lights trip

$1,350

Surf camp

$444.99

<div class="row g-3">
  <div class="col-md-4">
    <div class="card h-100 hp-hit">
      <img src="../assets/img/product-9.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">Vineyard stay</a></h3>
        <span class="fw-semibold">$226.00</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100 hp-hit">
      <img src="../assets/img/product-8.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">Northern lights trip</a></h3>
        <span class="fw-semibold">$1,350</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100 hp-hit">
      <img src="../assets/img/product-12.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">Surf camp</a></h3>
        <span class="fw-semibold">$444.99</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

The best time of year to visit Japan

yesterday

A beginner's guide to getting started

just now

Looking back at a busy season

yesterday

<div class="list-group">
  <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">The best time of year to visit Japan</a>
      <p class="small text-body-secondary mb-0">yesterday</p>
    </div>
  </div>
  <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">A beginner&#39;s guide to getting started</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">Looking back at a busy season</a>
      <p class="small text-body-secondary mb-0">yesterday</p>
    </div>
  </div>
</div>

7Team member cards

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

Finn Ortega

HR Partner

Hana Varga

QA Engineer

Nadia Moreau

HR Partner

<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">Finn Ortega</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-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">Hana Varga</a></h3>
        <small class="text-body-secondary">QA Engineer</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">Nadia Moreau</a></h3>
        <small class="text-body-secondary">HR Partner</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

A first-timer's guide to safari

Friendly people answer your questions quickly, by phone, chat or email.

<div class="card overflow-hidden hp-hit">
  <div class="row g-0">
    <div class="col-4">
      <img src="https://images.unsplash.com/photo-1727622765649-1af1d87ee018?auto=format&fit=crop&w=1200&h=800&q=70" 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 first-timer&#39;s guide to safari</a></h3>
        <p class="small mb-0 d-none d-sm-block">Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$25.78

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.78</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.

Free cancellation

Free cancellation on most stays means you can book now and decide later.

Best price guarantee

Travel insurance and car rental can be added in a single click.

Flexible dates

Every detail is handled by people who care about getting it right.

<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">Free cancellation</h3>
      <p class="small mb-0">Free cancellation on most stays means you can book now and decide later.</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">Best price guarantee</h3>
      <p class="small mb-0">Travel insurance and car rental can be added in a single click.</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">Flexible dates</h3>
      <p class="small mb-0">Every detail is handled by people who care about getting it right.</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.

halois-co.example/dashboard

The small habits that make a big difference

Clear prices, honest advice and no surprises along the way.

halois-co.example/dashboard

The best time of year to visit Japan

Start in minutes and get help from a real person whenever you need it.

halois-co.example/dashboard

Hidden beaches of the Mediterranean

Every hotel on our list is visited and reviewed by our own travel team.

<div class="vstack gap-3">
  <div class="position-relative">
    <small class="text-success">halois-co.example/dashboard</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">The small habits that make a big difference</a></h3>
    <p class="small text-body-secondary mb-0">Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">halois-co.example/dashboard</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">The best time of year to visit Japan</a></h3>
    <p class="small text-body-secondary mb-0">Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">halois-co.example/dashboard</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Hidden beaches of the Mediterranean</a></h3>
    <p class="small text-body-secondary mb-0">Every hotel on our list is visited and reviewed by our own travel team.</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">routine-27</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">process-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-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">project-19</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">release-4</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV23

Travelling with kids: our tried and tested tips

Prague · 14: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">23</strong>
    </div>
    <div>
      <h3 class="h6 mb-1"><a href="#" class="stretched-link link-body-emphasis text-decoration-none">Travelling with kids: our tried and tested tips</a></h3>
      <small class="text-body-secondary"><i class="bi bi-geo-alt" aria-hidden="true"></i> Prague &middot; 14:45</small>
    </div>
  </div>
</div>

14Inbox rows

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

Kenji Rossi
How to travel more responsibly
12:00
Diego Nguyen
Ten weekend escapes within two hours of home
20:15
Zoe Haddad
How to pack for two weeks with one bag
10:45

<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 Rossi</a><p class="small text-body-secondary mb-0">How to travel more responsibly</p></div><small class="text-body-secondary text-nowrap">12:00</small></li>
  <li class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><img src="../assets/img/avatar-7.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">Diego Nguyen</a><p class="small text-body-secondary mb-0">Ten weekend escapes within two hours of home</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-7.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">Zoe Haddad</a><p class="small text-body-secondary mb-0">How to pack for two weeks with one bag</p></div><small class="text-body-secondary text-nowrap">10:45</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.

Travel insurance 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">Travel insurance</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.

City

Beach

Adventure

<div class="row g-2">
  <div class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="https://images.unsplash.com/photo-1682686580036-b5e25932ce9a?auto=format&fit=crop&w=800&h=800&q=70" 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">City</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="position-relative rounded-3 overflow-hidden">
      <img src="https://images.unsplash.com/photo-1727622765649-1af1d87ee018?auto=format&fit=crop&w=800&h=800&q=70" 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="https://images.unsplash.com/photo-1578894381163-e72c17f2d45f?auto=format&fit=crop&w=800&h=800&q=70" 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">Adventure</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

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

Travel insurance

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

18Clickable dashboard tiles

Metric tiles that open the matching report.

2.3k

Orders

4.4k

Visitors

302

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">
            2.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 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.4k
          </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">
            302
          </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

Sales · Barcelona

Customer SuccessFull time

Customer Support · Porto

HR PartnerFull time

Sales · 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">Operations Manager</a><span class="badge text-bg-light border">Part time</span>
    </div>
    <small class="text-body-secondary">Sales &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">Customer Success</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-body-secondary">Customer Support &middot; Porto</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">HR Partner</a><span class="badge text-bg-light border">Full time</span>
    </div>
    <small class="text-body-secondary">Sales &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 our travellers asked us most

Thousands of travellers already trust us, and we work hard to keep it that way.

#product

<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 our travellers asked us most</a></h3>
    <p class="small">Thousands of travellers already trust us, and we work hard to keep it that way.</p>
    <a href="#" class="badge text-bg-primary text-decoration-none position-relative z-2">#product</a> 
  </div>
</div>