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.

Hotel booking

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

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">Hotel booking</h3>
    <p class="card-text small">Free cancellation on most stays means you can book now and decide later.</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

How to pack for two weeks with one bag

Oct 2, 2025

<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">How to pack for two weeks with one bag</a></h3>
    <p class="small text-body-secondary mb-0">Oct 2, 2025</p>
  </div>
</div>

3Media object

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

Five things we learned this year

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">Five things we learned this year</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

Our team has done this many times, so you never have to guess.

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">Our team has done this many times, so you never have to guess.</p>
    <a href="#" class="stretched-link">Open article</a> 
  </div>
</div>

5Product tiles

Shop tiles where the whole card opens the product page.

Safari adventure

$1,950

Mountain lodge

$246.00

Food tour

$79.00

<div class="row g-3">
  <div class="col-md-4">
    <div class="card h-100 hp-hit">
      <img src="../assets/img/product-5.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">Safari adventure</a></h3>
        <span class="fw-semibold">$1,950</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">Mountain lodge</a></h3>
        <span class="fw-semibold">$246.00</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100 hp-hit">
      <img src="../assets/img/product-7.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">Food tour</a></h3>
        <span class="fw-semibold">$79.00</span>
      </div>
    </div>
  </div>
</div>

6Notification rows

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

How to choose the right trip

53 min ago

Ten weekend escapes within two hours of home

10 hours ago

Our favourite tips for busy weeks

20 hours ago

<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">How to choose the right trip</a>
      <p class="small text-body-secondary mb-0">53 min ago</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">Ten weekend escapes within two hours of home</a>
      <p class="small text-body-secondary mb-0">10 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">Our favourite tips for busy weeks</a>
      <p class="small text-body-secondary mb-0">20 hours ago</p>
    </div>
  </div>
</div>

7Team member cards

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

Zoe Novak

Customer Success

Freya Okafor

Project Manager

Ivy Ibrahim

Product Designer

<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-11.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">Zoe Novak</a></h3>
        <small class="text-body-secondary">Customer Success</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">Freya Okafor</a></h3>
        <small class="text-body-secondary">Project Manager</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-9.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 Ibrahim</a></h3>
        <small class="text-body-secondary">Product Designer</small>
      </div>
    </div>
  </div>
</div>

8Horizontal blog card

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

Our favourite small hotels this year

From city breaks to safaris, we plan trips around how you like to travel.

<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">Our favourite small hotels this year</a></h3>
        <p class="small mb-0 d-none d-sm-block">From city breaks to safaris, we plan trips around how you like to travel.</p>
      </div>
    </div>
  </div>
</div>

9Pricing card

The plan card selects the plan wherever you click.

Starter

$22.87

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

Best price guarantee

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

Curated stays

We listen first, then build a plan around what you actually need.

24/7 assistance

Local guides show you the places that never make it into guidebooks.

<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">Best price guarantee</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 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">Curated stays</h3>
      <p class="small mb-0">We listen first, then build a plan around what you actually need.</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">24/7 assistance</h3>
      <p class="small mb-0">Local guides show you the places that never make it into guidebooks.</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.

nimbus.example/plan

The best time of year to visit Japan

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

nimbus.example/idea

Travelling with kids: our tried and tested tips

Members get room upgrades and late check-out at selected hotels.

nimbus.example/workflow

Three days in Lisbon, hour by hour

We keep things simple, so you can focus on what matters to you.

<div class="vstack gap-3">
  <div class="position-relative">
    <small class="text-success">nimbus.example/plan</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">We measure success by how many travellers come back and tell their friends.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">nimbus.example/idea</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Travelling with kids: our tried and tested tips</a></h3>
    <p class="small text-body-secondary mb-0">Members get room upgrades and late check-out at selected hotels.</p>
  </div>
  <div class="position-relative">
    <small class="text-success">nimbus.example/workflow</small>
    <h3 class="h6 mb-1"><a href="#" class="stretched-link">Three days in Lisbon, hour by hour</a></h3>
    <p class="small text-body-secondary mb-0">We keep things simple, so you can focus on what matters to you.</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">process-8</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-40</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">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-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">process-21</a>
    </div>
  </div>
</div>

13Event card with date block

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

NOV12

Looking back at a busy season

Copenhagen · 13:30

<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">Looking back at a busy season</a></h3>
      <small class="text-body-secondary"><i class="bi bi-geo-alt" aria-hidden="true"></i> Copenhagen &middot; 13:30</small>
    </div>
  </div>
</div>

14Inbox rows

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

Leo Hughes
How to choose the right trip
18:45
Sofia Ashford
A first-timer's guide to safari
14:45
Lea Haddad
The small habits that make a big difference
19: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-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">Leo Hughes</a><p class="small text-body-secondary mb-0">How to choose the right trip</p></div><small class="text-body-secondary text-nowrap">18:45</small></li>
  <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">Sofia Ashford</a><p class="small text-body-secondary mb-0">A first-timer&#39;s guide to safari</p></div><small class="text-body-secondary text-nowrap">14:45</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">Lea Haddad</a><p class="small text-body-secondary mb-0">The small habits that make a big difference</p></div><small class="text-body-secondary text-nowrap">19: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.

Guided tours 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">Guided tours</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.

Culture

City

Beach

<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">Culture</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">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-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">Beach</a>
      </div>
    </div>
  </div>
</div>

17Course card with progress

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

Travel insurance

10% 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="10" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.5rem">
      <div class="progress-bar" style="width:10%">
      </div>
    </div>
    <small class="text-body-secondary">10% complete</small> 
  </div>
</div>

18Clickable dashboard tiles

Metric tiles that open the matching report.

7.0k

Orders

6.5k

Visitors

333

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">
            7.0k
          </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">
            6.5k
          </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">
            333
          </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.

Frontend EngineerPart time

Customer Support · Singapore

Frontend EngineerRemote

Engineering · Prague

Operations ManagerPart time

Research · Prague

<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">Frontend Engineer</a><span class="badge text-bg-light border">Part time</span>
    </div>
    <small class="text-body-secondary">Customer Support &middot; Singapore</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">Frontend Engineer</a><span class="badge text-bg-light border">Remote</span>
    </div>
    <small class="text-body-secondary">Engineering &middot; Prague</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">Operations Manager</a><span class="badge text-bg-light border">Part time</span>
    </div>
    <small class="text-body-secondary">Research &middot; Prague</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.

Hidden beaches of the Mediterranean

We find the best price, and if you see it cheaper we match it.

#release

<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">Hidden beaches of the Mediterranean</a></h3>
    <p class="small">We find the best price, and if you see it cheaper we match it.</p>
    <a href="#" class="badge text-bg-primary text-decoration-none position-relative z-2">#release</a> 
  </div>
</div>