Position
Position helpers pin an element to the top or bottom (fixed-top, fixed-bottom) or keep it in view while its container scrolls (sticky-top, sticky-bottom and the responsive sticky-*-top variants). Every example runs inside its own scrollable frame, so scroll the frames to watch the bars stay put.
1Sticky page header
sticky-top keeps a section header visible while the content below it scrolls. Scroll the frame.
A calm update turns the whole team on the same page with friendly support.
Our dental care connects projects moving forward from the very first day.
The new online results brings time back in your day on any device.
This bright update guides results you can measure from the very first day.
Our lab tests connects every detail in view wherever you are.
Our physiotherapy guides your work organised in just a few clicks.
A elegant community keeps complex tasks into simple steps all year round.
A calm project brings decisions quicker and clearer for teams of every size.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky header demo">
<header class="sticky-top bg-page border-b px-4 py-2 font-semibold">
<i class="bi bi-journal-text" aria-hidden="true"></i> 6 lessons from our process
</header>
<div class="p-4">
<p class="small mb-4">A calm update turns the whole team on the same page with friendly support.</p>
<p class="small mb-4">Our dental care connects projects moving forward from the very first day.</p>
<p class="small mb-4">The new online results brings time back in your day on any device.</p>
<p class="small mb-4">This bright update guides results you can measure from the very first day.</p>
<p class="small mb-4">Our lab tests connects every detail in view wherever you are.</p>
<p class="small mb-4">Our physiotherapy guides your work organised in just a few clicks.</p>
<p class="small mb-4">A elegant community keeps complex tasks into simple steps all year round.</p>
<p class="small mb-4">A calm project brings decisions quicker and clearer for teams of every size.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
Our general practice makes data easy to understand with friendly support.
A fast idea gives the whole team on the same page in just a few clicks.
This practical team makes your work organised without the usual hassle.
The new family plans guides complex tasks into simple steps in just a few clicks.
Our physiotherapy guides the whole team on the same page on any device.
This elegant journey lets every detail in view for teams of every size.
Our health check-ups keeps complex tasks into simple steps wherever you are.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky save bar demo">
<div class="p-4">
<p class="small mb-4">Our general practice makes data easy to understand with friendly support.</p>
<p class="small mb-4">A fast idea gives the whole team on the same page in just a few clicks.</p>
<p class="small mb-4">This practical team makes your work organised without the usual hassle.</p>
<p class="small mb-4">The new family plans guides complex tasks into simple steps in just a few clicks.</p>
<p class="small mb-4">Our physiotherapy guides the whole team on the same page on any device.</p>
<p class="small mb-4">This elegant journey lets every detail in view for teams of every size.</p>
<p class="small mb-4">Our health check-ups keeps complex tasks into simple steps wherever you are.</p>
</div>
<div class="sticky-bottom bg-surface-3 border-t p-2 flex justify-end gap-2">
<button type="button" class="btn btn-sm btn-light">Discard</button>
<button type="button" class="btn btn-sm btn-primary">Save changes</button>
</div>
</div>
</div>3Sticky table header
Put sticky-top on the thead so the column names stay visible in a long table.
| Name | Role | City |
|---|---|---|
| Isla Carter | Backend Engineer | Copenhagen |
| Diego Mensah | Product Designer | Toronto |
| Priya Sato | Support Specialist | Kyoto |
| Arjun Quinn | Operations Manager | Kyoto |
| Lea Delgado | Content Writer | Melbourne |
| Mason Quinn | Frontend Engineer | Cape Town |
| Ella Brennan | Frontend Engineer | Singapore |
| Elena Novak | Art Director | Edinburgh |
| Felix Tanaka | Product Designer | Seoul |
| Hana Alvarez | Customer Success | Valencia |
| Ella Sato | Frontend Engineer | Lisbon |
| Samir Larsen | Finance Lead | Vancouver |
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Team table">
<table class="table table-sm table-striped mb-0">
<thead class="sticky-top">
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Isla Carter</td>
<td>Backend Engineer</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Diego Mensah</td>
<td>Product Designer</td>
<td>Toronto</td>
</tr>
<tr>
<td>Priya Sato</td>
<td>Support Specialist</td>
<td>Kyoto</td>
</tr>
<tr>
<td>Arjun Quinn</td>
<td>Operations Manager</td>
<td>Kyoto</td>
</tr>
<tr>
<td>Lea Delgado</td>
<td>Content Writer</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Mason Quinn</td>
<td>Frontend Engineer</td>
<td>Cape Town</td>
</tr>
<tr>
<td>Ella Brennan</td>
<td>Frontend Engineer</td>
<td>Singapore</td>
</tr>
<tr>
<td>Elena Novak</td>
<td>Art Director</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Felix Tanaka</td>
<td>Product Designer</td>
<td>Seoul</td>
</tr>
<tr>
<td>Hana Alvarez</td>
<td>Customer Success</td>
<td>Valencia</td>
</tr>
<tr>
<td>Ella Sato</td>
<td>Frontend Engineer</td>
<td>Lisbon</td>
</tr>
<tr>
<td>Samir Larsen</td>
<td>Finance Lead</td>
<td>Vancouver</td>
</tr>
</tbody>
</table>
</div>
</div>4Alphabet section headings
Each letter heading is sticky inside its own section, so the next letter pushes the previous one away.
A
- Alvarez, Tariq
- Ashford, Kai
D
- Delgado, Sofia
F
- Fischer, Felix
- Fischer, Ivy
- Fischer, Priya
H
- Haddad, Nadia
K
- Kim, Ivy
- Kowalski, Arjun
- Kowalski, Mason
L
- Larsen, Ethan
M
- Mensah, Maya
- Moreau, Amara
- Morgan, Mason
N
- Nguyen, Ava
- Novak, Mason
O
- Okafor, Nadia
P
- Patel, Aria
Q
- Quinn, Kai
- Quinn, Theo
R
- Rossi, Lea
T
- Tanaka, Ava
V
- Varga, Owen
- Varga, Sofia
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Contacts">
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">A</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Alvarez, Tariq</li>
<li class="py-1">Ashford, Kai</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">D</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Delgado, Sofia</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">F</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Fischer, Felix</li>
<li class="py-1">Fischer, Ivy</li>
<li class="py-1">Fischer, Priya</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">H</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Haddad, Nadia</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">K</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Kim, Ivy</li>
<li class="py-1">Kowalski, Arjun</li>
<li class="py-1">Kowalski, Mason</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">L</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Larsen, Ethan</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">M</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Mensah, Maya</li>
<li class="py-1">Moreau, Amara</li>
<li class="py-1">Morgan, Mason</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">N</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Nguyen, Ava</li>
<li class="py-1">Novak, Mason</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">O</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Okafor, Nadia</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">P</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Patel, Aria</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">Q</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Quinn, Kai</li>
<li class="py-1">Quinn, Theo</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">R</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Rossi, Lea</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">T</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Tanaka, Ava</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">V</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Varga, Owen</li>
<li class="py-1">Varga, Sofia</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
This smart story gives results you can measure in just a few clicks.
A friendly project keeps complex tasks into simple steps on any device.
A calm experience guides results you can measure in just a few clicks.
Our health check-ups shows your work organised on any device.
The new online results lets the whole team on the same page for teams of every size.
Our dental care keeps your work organised with friendly support.
A calm release gives complex tasks into simple steps for teams of every size.
This reliable community brings results you can measure in just a few clicks.
The new certified specialists helps results you can measure with friendly support.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Article with sidebar">
<div class="row g-0">
<div class="col-4 border-e">
<nav class="sticky-top p-2 small" aria-label="On this page">
<div class="font-semibold mb-1">
On this page
</div>
<a class="block" href="#">Overview</a><a class="block" href="#">Setup</a><a class="block" href="#">FAQ</a>
</nav>
</div>
<div class="col-8 p-4">
<p class="small mb-4">This smart story gives results you can measure in just a few clicks.</p>
<p class="small mb-4">A friendly project keeps complex tasks into simple steps on any device.</p>
<p class="small mb-4">A calm experience guides results you can measure in just a few clicks.</p>
<p class="small mb-4">Our health check-ups shows your work organised on any device.</p>
<p class="small mb-4">The new online results lets the whole team on the same page for teams of every size.</p>
<p class="small mb-4">Our dental care keeps your work organised with friendly support.</p>
<p class="small mb-4">A calm release gives complex tasks into simple steps for teams of every size.</p>
<p class="small mb-4">This reliable community brings results you can measure in just a few clicks.</p>
<p class="small mb-4">The new certified specialists helps results you can measure with friendly support.</p>
</div>
</div>
</div>
</div>6Responsive sticky (md and up)
sticky-md-top only sticks from the md breakpoint; on phones the bar scrolls away with the page.
The new certified specialists turns your work organised for teams of every size.
This flexible process makes your work organised in just a few clicks.
The new online results connects results you can measure on any device.
A smart community turns projects moving forward for teams of every size.
A smart project brings complex tasks into simple steps without the usual hassle.
A reliable story gives decisions quicker and clearer without the usual hassle.
The new family plans guides data easy to understand without the usual hassle.
A friendly journey keeps results you can measure without the usual hassle.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Responsive sticky demo">
<div class="sticky-md-top bg-primary text-white px-4 py-2 small">
<i class="bi bi-phone" aria-hidden="true"></i> Sticky from md, normal flow on small screens
</div>
<div class="p-4">
<p class="small mb-4">The new certified specialists turns your work organised for teams of every size.</p>
<p class="small mb-4">This flexible process makes your work organised in just a few clicks.</p>
<p class="small mb-4">The new online results connects results you can measure on any device.</p>
<p class="small mb-4">A smart community turns projects moving forward for teams of every size.</p>
<p class="small mb-4">A smart project brings complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-4">A reliable story gives decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-4">The new family plans guides data easy to understand without the usual hassle.</p>
<p class="small mb-4">A friendly journey keeps results you can measure without the usual hassle.</p>
</div>
</div>
</div>7Fixed-top navbar
fixed-top pins a navbar to the top edge; the frame acts as the viewport, so the bar stays inside the example.
The new same-day appointments gives you focused on what matters at a fair price.
The new family plans brings projects moving forward on any device.
The new same-day appointments connects data easy to understand in just a few clicks.
This fast journey helps decisions quicker and clearer all year round.
Our health check-ups gives customers coming back with friendly support.
The new certified specialists brings results you can measure without extra tools.
The new family plans turns results you can measure for teams of every size.
This smart idea shows decisions quicker and clearer with friendly support.
<div class="hp-pos">
<nav class="navbar fixed-top bg-page border-b px-4 py-2" aria-label="Demo">
<span class="navbar-brand mb-0 h6"><i class="bi bi-lightning-charge" aria-hidden="true"></i> Brand name 15</span>
<button type="button" class="btn btn-sm btn-outline-primary">Sign up</button>
</nav>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Fixed navbar demo">
<div class="px-4 pb-4" style="padding-top:4rem">
<p class="small mb-4">The new same-day appointments gives you focused on what matters at a fair price.</p>
<p class="small mb-4">The new family plans brings projects moving forward on any device.</p>
<p class="small mb-4">The new same-day appointments connects data easy to understand in just a few clicks.</p>
<p class="small mb-4">This fast journey helps decisions quicker and clearer all year round.</p>
<p class="small mb-4">Our health check-ups gives customers coming back with friendly support.</p>
<p class="small mb-4">The new certified specialists brings results you can measure without extra tools.</p>
<p class="small mb-4">The new family plans turns results you can measure for teams of every size.</p>
<p class="small mb-4">This smart idea shows decisions quicker and clearer with friendly support.</p>
</div>
</div>
</div>8Fixed-bottom tab bar
A mobile style tab bar with fixed-bottom; content gets bottom padding so nothing hides behind it.
The new reminders brings time back in your day for teams of every size.
A smart workflow lets results you can measure all year round.
Our lab tests gives projects moving forward with friendly support.
This bright launch shows projects moving forward for teams of every size.
A elegant community brings new ideas to life with friendly support.
This practical workflow makes you focused on what matters in just a few clicks.
This focused team connects customers coming back with friendly support.
Our health check-ups lets every detail in view without the usual hassle.
<div class="hp-pos">
<nav class="fixed-bottom flex bg-page border-t" aria-label="App">
<a href="#" class="flex-auto text-center small py-2 no-underline text-primary" aria-current="page"><i class="bi bi-house" aria-hidden="true"></i><span class="block">Home</span></a><a href="#" class="flex-auto text-center small py-2 no-underline text-muted"><i class="bi bi-search" aria-hidden="true"></i><span class="block">Search</span></a><a href="#" class="flex-auto text-center small py-2 no-underline text-muted"><i class="bi bi-heart" aria-hidden="true"></i><span class="block">Saved</span></a><a href="#" class="flex-auto text-center small py-2 no-underline text-muted"><i class="bi bi-person" aria-hidden="true"></i><span class="block">Profile</span></a>
</nav>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Mobile tab bar demo">
<div class="px-4 pt-4" style="padding-bottom:4.5rem">
<p class="small mb-4">The new reminders brings time back in your day for teams of every size.</p>
<p class="small mb-4">A smart workflow lets results you can measure all year round.</p>
<p class="small mb-4">Our lab tests gives projects moving forward with friendly support.</p>
<p class="small mb-4">This bright launch shows projects moving forward for teams of every size.</p>
<p class="small mb-4">A elegant community brings new ideas to life with friendly support.</p>
<p class="small mb-4">This practical workflow makes you focused on what matters in just a few clicks.</p>
<p class="small mb-4">This focused team connects customers coming back with friendly support.</p>
<p class="small mb-4">Our health check-ups lets every detail in view without the usual hassle.</p>
</div>
</div>
</div>9App shell: fixed top and bottom
A fixed-top title bar plus a fixed-bottom status line around a scrolling list.
- Ravi IbrahimWhat's new in cardiology
- Maya SilvaHow we rebuilt our routine
- Felix TanakaA guide to physiotherapy
- Omar TanakaHow we rebuilt our release
- Sofia MorganHow we rebuilt our update
- Diego KimThe secure launch checklist
- Mateo IbrahimThe elegant update checklist
- Ruby AshfordPlan notes for patients
- Hana KimWhat's new in dermatology
<div class="hp-pos">
<div class="fixed-top text-bg-dark px-4 py-2 small font-semibold">
<i class="bi bi-inbox" aria-hidden="true"></i> Inbox
</div>
<div class="fixed-bottom bg-surface-3 border-t px-4 py-1 small text-muted">
Synced 32 min ago
</div>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="App shell demo">
<ul class="list-group list-group-flush" style="padding-top:2.5rem;padding-bottom:2rem">
<li class="list-group-item small"><strong class="block">Ravi Ibrahim</strong>What's new in cardiology</li>
<li class="list-group-item small"><strong class="block">Maya Silva</strong>How we rebuilt our routine</li>
<li class="list-group-item small"><strong class="block">Felix Tanaka</strong>A guide to physiotherapy</li>
<li class="list-group-item small"><strong class="block">Omar Tanaka</strong>How we rebuilt our release</li>
<li class="list-group-item small"><strong class="block">Sofia Morgan</strong>How we rebuilt our update</li>
<li class="list-group-item small"><strong class="block">Diego Kim</strong>The secure launch checklist</li>
<li class="list-group-item small"><strong class="block">Mateo Ibrahim</strong>The elegant update checklist</li>
<li class="list-group-item small"><strong class="block">Ruby Ashford</strong>Plan notes for patients</li>
<li class="list-group-item small"><strong class="block">Hana Kim</strong>What's new in dermatology</li>
</ul>
</div>
</div>10Sticky chat composer
The message input uses sticky-bottom so it is always at hand below the conversation.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Chat demo">
<div class="p-4">
<div class="flex mb-2">
<div class="px-4 py-2 rounded-lg small bg-surface-3" style="max-width:75%">
A smart update gives decisions quicker and clearer from the very first day.
</div>
</div>
<div class="flex justify-end mb-2">
<div class="px-4 py-2 rounded-lg small text-bg-primary" style="max-width:75%">
This flexible goal gives decisions quicker and clearer on any device.
</div>
</div>
<div class="flex mb-2">
<div class="px-4 py-2 rounded-lg small bg-surface-3" style="max-width:75%">
This fast project lets complex tasks into simple steps without the usual hassle.
</div>
</div>
<div class="flex justify-end mb-2">
<div class="px-4 py-2 rounded-lg small text-bg-primary" style="max-width:75%">
This simple dashboard keeps results you can measure on any device.
</div>
</div>
<div class="flex mb-2">
<div class="px-4 py-2 rounded-lg small bg-surface-3" style="max-width:75%">
Our dental care keeps customers coming back all year round.
</div>
</div>
<div class="flex justify-end mb-2">
<div class="px-4 py-2 rounded-lg small text-bg-primary" style="max-width:75%">
This honest workflow guides time back in your day for teams of every size.
</div>
</div>
</div>
<form class="sticky-bottom bg-page border-t p-2 flex gap-2">
<label class="sr-only" for="hp-msg-1234">Message</label>
<input class="form-control form-control-sm" id="hp-msg-1234" type="text" placeholder="Write a message">
<button type="submit" class="btn btn-sm btn-primary" aria-label="Send"><i class="bi bi-send" aria-hidden="true"></i></button>
</form>
</div>
</div>11Sticky cart total
The order total sticks to the bottom of a long basket list.
- Blood test$472.99
- Dental cleaning$395.99
- Video consult$12.50
- Vaccination$208.99
- Annual check-up$224.99
- Physio session$186.00
- Blood test Mini$52.00
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Basket">
<ul class="list-group list-group-flush">
<li class="list-group-item flex justify-between small"><span>Blood test</span><span>$472.99</span></li>
<li class="list-group-item flex justify-between small"><span>Dental cleaning</span><span>$395.99</span></li>
<li class="list-group-item flex justify-between small"><span>Video consult</span><span>$12.50</span></li>
<li class="list-group-item flex justify-between small"><span>Vaccination</span><span>$208.99</span></li>
<li class="list-group-item flex justify-between small"><span>Annual check-up</span><span>$224.99</span></li>
<li class="list-group-item flex justify-between small"><span>Physio session</span><span>$186.00</span></li>
<li class="list-group-item flex justify-between small"><span>Blood test Mini</span><span>$52.00</span></li>
</ul>
<div class="sticky-bottom text-bg-light border-t flex justify-between items-center px-4 py-2">
<strong>Total $1,553.46</strong>
<button type="button" class="btn btn-sm btn-success">Checkout</button>
</div>
</div>
</div>12Sticky filters on large screens
sticky-lg-top keeps the filter row in view on wide screens only.
The new reminders brings your work organised for teams of every size.
The new same-day appointments turns new ideas to life with friendly support.
The new same-day appointments shows every detail in view all year round.
A secure process brings time back in your day in just a few clicks.
This flexible journey turns results you can measure all year round.
The new family plans turns you focused on what matters on any device.
Our dental care lets projects moving forward without extra tools.
This practical goal connects you focused on what matters from the very first day.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product filters">
<div class="sticky-lg-top bg-page border-b p-2 flex gap-2 items-center">
<label class="small whitespace-nowrap" for="hp-sort-1235">Sort by</label>
<select class="form-select form-select-sm" id="hp-sort-1235">
<option>Newest</option>
<option>Price</option>
<option>Rating</option>
</select>
</div>
<div class="p-4">
<p class="small mb-4">The new reminders brings your work organised for teams of every size.</p>
<p class="small mb-4">The new same-day appointments turns new ideas to life with friendly support.</p>
<p class="small mb-4">The new same-day appointments shows every detail in view all year round.</p>
<p class="small mb-4">A secure process brings time back in your day in just a few clicks.</p>
<p class="small mb-4">This flexible journey turns results you can measure all year round.</p>
<p class="small mb-4">The new family plans turns you focused on what matters on any device.</p>
<p class="small mb-4">Our dental care lets projects moving forward without extra tools.</p>
<p class="small mb-4">This practical goal connects you focused on what matters from the very first day.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Feel better with expert care
Our telehealth connects customers coming back all year round.
A flexible goal brings customers coming back wherever you are.
A honest process shows new ideas to life for teams of every size.
A focused launch turns customers coming back at a fair price.
A elegant routine connects every detail in view for teams of every size.
This fast workflow keeps the whole team on the same page for teams of every size.
Our health check-ups helps customers coming back without the usual hassle.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Editor demo">
<div class="sticky-top bg-surface-3 border-b p-1 flex gap-1" role="toolbar" aria-label="Formatting">
<button type="button" class="btn btn-sm btn-light" aria-label="Bold"><i class="bi bi-type-bold" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-light" aria-label="Italic"><i class="bi bi-type-italic" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-light" aria-label="Bulleted list"><i class="bi bi-list-ul" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-light" aria-label="Insert link"><i class="bi bi-link-45deg" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-light" aria-label="Insert image"><i class="bi bi-image" aria-hidden="true"></i></button>
</div>
<div class="p-4">
<h3 class="h5">Feel better with expert care</h3>
<p class="small mb-4">Our telehealth connects customers coming back all year round.</p>
<p class="small mb-4">A flexible goal brings customers coming back wherever you are.</p>
<p class="small mb-4">A honest process shows new ideas to life for teams of every size.</p>
<p class="small mb-4">A focused launch turns customers coming back at a fair price.</p>
<p class="small mb-4">A elegant routine connects every detail in view for teams of every size.</p>
<p class="small mb-4">This fast workflow keeps the whole team on the same page for teams of every size.</p>
<p class="small mb-4">Our health check-ups helps customers coming back without the usual hassle.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
This focused plan connects time back in your day wherever you are.
Our lab tests helps you focused on what matters all year round.
Our health check-ups guides the whole team on the same page for teams of every size.
Our telehealth gives new ideas to life in just a few clicks.
A friendly experience turns decisions quicker and clearer in just a few clicks.
A bright story connects time back in your day without the usual hassle.
A powerful journey lets you focused on what matters on any device.
The new insurance friendly helps your work organised with friendly support.
The new family plans gives data easy to understand in just a few clicks.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Message thread">
<div class="sticky-top text-center py-1">
<span class="badge rounded-full text-bg-secondary">Monday</span>
</div>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">This focused plan connects time back in your day wherever you are.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">Our lab tests helps you focused on what matters all year round.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">Our health check-ups guides the whole team on the same page for teams of every size.</p>
<div class="sticky-top text-center py-1">
<span class="badge rounded-full text-bg-secondary">Yesterday</span>
</div>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">Our telehealth gives new ideas to life in just a few clicks.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">A friendly experience turns decisions quicker and clearer in just a few clicks.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">A bright story connects time back in your day without the usual hassle.</p>
<div class="sticky-top text-center py-1">
<span class="badge rounded-full text-bg-secondary">Today</span>
</div>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">A powerful journey lets you focused on what matters on any device.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">The new insurance friendly helps your work organised with friendly support.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">The new family plans gives data easy to understand in just a few clicks.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
This bright journey helps every detail in view all year round.
This clear dashboard guides every detail in view with friendly support.
This flexible project gives the whole team on the same page all year round.
Our general practice brings the whole team on the same page in just a few clicks.
The new reminders keeps every detail in view in just a few clicks.
A modern dashboard helps new ideas to life with friendly support.
This honest release connects time back in your day from the very first day.
The new certified specialists helps decisions quicker and clearer with friendly support.
<div class="hp-pos">
<div class="fixed-bottom m-2 alert alert-info flex items-center gap-2 mb-2 py-2 small" role="status">
<i class="bi bi-arrow-repeat" aria-hidden="true"></i><span class="me-auto">A new version is ready.</span>
<button type="button" class="btn btn-sm btn-info">Reload</button>
</div>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Update notice demo">
<div class="px-4 pt-4" style="padding-bottom:5rem">
<p class="small mb-4">This bright journey helps every detail in view all year round.</p>
<p class="small mb-4">This clear dashboard guides every detail in view with friendly support.</p>
<p class="small mb-4">This flexible project gives the whole team on the same page all year round.</p>
<p class="small mb-4">Our general practice brings the whole team on the same page in just a few clicks.</p>
<p class="small mb-4">The new reminders keeps every detail in view in just a few clicks.</p>
<p class="small mb-4">A modern dashboard helps new ideas to life with friendly support.</p>
<p class="small mb-4">This honest release connects time back in your day from the very first day.</p>
<p class="small mb-4">The new certified specialists helps decisions quicker and clearer with friendly support.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
A guide to lab tests
This clear process gives decisions quicker and clearer without extra tools.
Idea notes for patients
The new family plans guides complex tasks into simple steps without extra tools.
5 lessons from our story
The new family plans keeps complex tasks into simple steps all year round.
Inside the fast plan
Our lab tests guides the whole team on the same page without extra tools.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Category feed">
<div class="sticky-top bg-page p-2 flex flex-wrap gap-1 border-b">
<span class="badge rounded-full text-bg-light border">Pediatrics</span><span class="badge rounded-full text-bg-light border">Dermatology</span><span class="badge rounded-full text-bg-light border">Orthopedics</span><span class="badge rounded-full text-bg-light border">Cardiology</span><span class="badge rounded-full text-bg-light border">Dental</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">A guide to lab tests</h3>
<p class="small mb-0">This clear process gives decisions quicker and clearer without extra tools.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Idea notes for patients</h3>
<p class="small mb-0">The new family plans guides complex tasks into simple steps without extra tools.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">5 lessons from our story</h3>
<p class="small mb-0">The new family plans keeps complex tasks into simple steps all year round.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Inside the fast plan</h3>
<p class="small mb-0">Our lab tests guides the whole team on the same page without extra tools.</p>
</div>
</div>
</div>
</div>
</div>17Table of contents on extra-large screens
sticky-xl-top only sticks at 1200 px and wider, a common choice for docs layouts.
Our lab tests connects you focused on what matters in just a few clicks.
Our general practice lets every detail in view at a fair price.
The new insurance friendly gives results you can measure wherever you are.
Our telehealth makes complex tasks into simple steps with friendly support.
Our lab tests helps new ideas to life from the very first day.
This clear process connects you focused on what matters from the very first day.
The new same-day appointments brings projects moving forward from the very first day.
This focused update brings your work organised for teams of every size.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Docs layout">
<div class="sticky-xl-top bg-surface-3 border-b px-4 py-2 small">
<i class="bi bi-list-nested" aria-hidden="true"></i> Contents: Introduction · Install · Usage
</div>
<div class="p-4">
<p class="small mb-4">Our lab tests connects you focused on what matters in just a few clicks.</p>
<p class="small mb-4">Our general practice lets every detail in view at a fair price.</p>
<p class="small mb-4">The new insurance friendly gives results you can measure wherever you are.</p>
<p class="small mb-4">Our telehealth makes complex tasks into simple steps with friendly support.</p>
<p class="small mb-4">Our lab tests helps new ideas to life from the very first day.</p>
<p class="small mb-4">This clear process connects you focused on what matters from the very first day.</p>
<p class="small mb-4">The new same-day appointments brings projects moving forward from the very first day.</p>
<p class="small mb-4">This focused update brings your work organised for teams of every size.</p>
</div>
</div>
</div>18Checkout button on phones
sticky-sm-bottom sticks the call to action at the bottom from the sm breakpoint up.
Our general practice turns complex tasks into simple steps wherever you are.
This elegant release guides projects moving forward at a fair price.
Our dental care turns the whole team on the same page from the very first day.
The new insurance friendly guides the whole team on the same page on any device.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product details">
<div class="p-4">
<img src="../assets/img/product-5.svg" alt="Annual check-up" class="img-fluid rounded-md mb-4">
<p class="small mb-4">Our general practice turns complex tasks into simple steps wherever you are.</p>
<p class="small mb-4">This elegant release guides projects moving forward at a fair price.</p>
<p class="small mb-4">Our dental care turns the whole team on the same page from the very first day.</p>
<p class="small mb-4">The new insurance friendly guides the whole team on the same page on any device.</p>
</div>
<div class="sticky-sm-bottom bg-page border-t p-2">
<button type="button" class="btn btn-primary w-full"><i class="bi bi-bag-plus" aria-hidden="true"></i> Add to bag · $109.75</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
A honest dashboard keeps the whole team on the same page all year round.
A elegant plan makes the whole team on the same page wherever you are.
This secure plan connects projects moving forward all year round.
Our physiotherapy makes the whole team on the same page all year round.
Our health check-ups connects decisions quicker and clearer all year round.
Our lab tests shows complex tasks into simple steps without extra tools.
The new family plans turns decisions quicker and clearer for teams of every size.
The new family plans brings the whole team on the same page on any device.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Reading demo">
<div class="sticky-top bg-page">
<div class="px-4 py-2 small font-semibold">
Dashboard notes for patients
</div>
<div class="progress rounded-none" role="progressbar" aria-label="Reading progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:50%">
</div>
</div>
</div>
<div class="p-4">
<p class="small mb-4">A honest dashboard keeps the whole team on the same page all year round.</p>
<p class="small mb-4">A elegant plan makes the whole team on the same page wherever you are.</p>
<p class="small mb-4">This secure plan connects projects moving forward all year round.</p>
<p class="small mb-4">Our physiotherapy makes the whole team on the same page all year round.</p>
<p class="small mb-4">Our health check-ups connects decisions quicker and clearer all year round.</p>
<p class="small mb-4">Our lab tests shows complex tasks into simple steps without extra tools.</p>
<p class="small mb-4">The new family plans turns decisions quicker and clearer for teams of every size.</p>
<p class="small mb-4">The new family plans brings the whole team on the same page on any device.</p>
</div>
</div>
</div>20Sticky table footer
A tfoot with sticky-bottom keeps the running total visible in a timesheet.
| Date | Task | Hours |
|---|---|---|
| Aug 6, 2026 | Physiotherapy | 3 h |
| Jul 17, 2026 | Dental care | 6 h |
| May 9, 2026 | Dental care | 5 h |
| May 11, 2026 | Dental care | 1 h |
| Mar 19, 2026 | Lab tests | 3 h |
| Oct 10, 2025 | Health check-ups | 2 h |
| Dec 29, 2025 | General practice | 1 h |
| Jan 11, 2026 | General practice | 4 h |
| Apr 5, 2026 | Telehealth | 6 h |
| Feb 17, 2026 | Telehealth | 8 h |
| Total | 39 h | |
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Timesheet">
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Task</th>
<th scope="col" class="text-end">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aug 6, 2026</td>
<td>Physiotherapy</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Jul 17, 2026</td>
<td>Dental care</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>May 9, 2026</td>
<td>Dental care</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>May 11, 2026</td>
<td>Dental care</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Mar 19, 2026</td>
<td>Lab tests</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Oct 10, 2025</td>
<td>Health check-ups</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Dec 29, 2025</td>
<td>General practice</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Jan 11, 2026</td>
<td>General practice</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Apr 5, 2026</td>
<td>Telehealth</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>Feb 17, 2026</td>
<td>Telehealth</td>
<td class="text-end">8 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light font-semibold">
<td colspan="2">Total</td>
<td class="text-end">39 h</td>
</tr>
</tfoot>
</table>
</div>
</div>