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.
Our lab tests makes results you can measure wherever you are.
Our dental care guides time back in your day wherever you are.
Our general practice gives decisions quicker and clearer at a fair price.
The new certified specialists makes your work organised all year round.
A friendly project shows data easy to understand with friendly support.
A honest workflow gives results you can measure without the usual hassle.
The new same-day appointments helps data easy to understand without extra tools.
Our general practice makes decisions quicker and clearer in just a few clicks.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky header demo">
<header class="sticky-top bg-body border-bottom px-3 py-2 fw-semibold">
<i class="bi bi-journal-text" aria-hidden="true"></i> How we rebuilt our update
</header>
<div class="p-3">
<p class="small mb-3">Our lab tests makes results you can measure wherever you are.</p>
<p class="small mb-3">Our dental care guides time back in your day wherever you are.</p>
<p class="small mb-3">Our general practice gives decisions quicker and clearer at a fair price.</p>
<p class="small mb-3">The new certified specialists makes your work organised all year round.</p>
<p class="small mb-3">A friendly project shows data easy to understand with friendly support.</p>
<p class="small mb-3">A honest workflow gives results you can measure without the usual hassle.</p>
<p class="small mb-3">The new same-day appointments helps data easy to understand without extra tools.</p>
<p class="small mb-3">Our general practice makes decisions quicker and clearer in just a few clicks.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
The new reminders turns you focused on what matters wherever you are.
This focused release makes every detail in view at a fair price.
A elegant process guides complex tasks into simple steps at a fair price.
The new family plans connects the whole team on the same page with friendly support.
This powerful process shows your work organised in just a few clicks.
The new certified specialists connects time back in your day with friendly support.
A fast journey keeps the whole team on the same page with friendly support.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky save bar demo">
<div class="p-3">
<p class="small mb-3">The new reminders turns you focused on what matters wherever you are.</p>
<p class="small mb-3">This focused release makes every detail in view at a fair price.</p>
<p class="small mb-3">A elegant process guides complex tasks into simple steps at a fair price.</p>
<p class="small mb-3">The new family plans connects the whole team on the same page with friendly support.</p>
<p class="small mb-3">This powerful process shows your work organised in just a few clicks.</p>
<p class="small mb-3">The new certified specialists connects time back in your day with friendly support.</p>
<p class="small mb-3">A fast journey keeps the whole team on the same page with friendly support.</p>
</div>
<div class="sticky-bottom bg-body-tertiary border-top p-2 d-flex justify-content-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 |
|---|---|---|
| Leo Delgado | Finance Lead | Kyoto |
| Samir Nguyen | Art Director | Oslo |
| Kai Larsen | Finance Lead | Auckland |
| Leo Harlow | Data Analyst | Barcelona |
| Ethan Fischer | Support Specialist | Seoul |
| Diego Whitaker | Content Writer | Dublin |
| Mia Novak | Frontend Engineer | Valencia |
| Maya Mensah | Marketing Lead | Prague |
| Mason Carter | Backend Engineer | Oslo |
| Ivy Rossi | Sales Executive | Auckland |
| Ethan Harlow | Art Director | Lisbon |
| Mia Nguyen | HR Partner | Oslo |
<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>Leo Delgado</td>
<td>Finance Lead</td>
<td>Kyoto</td>
</tr>
<tr>
<td>Samir Nguyen</td>
<td>Art Director</td>
<td>Oslo</td>
</tr>
<tr>
<td>Kai Larsen</td>
<td>Finance Lead</td>
<td>Auckland</td>
</tr>
<tr>
<td>Leo Harlow</td>
<td>Data Analyst</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Ethan Fischer</td>
<td>Support Specialist</td>
<td>Seoul</td>
</tr>
<tr>
<td>Diego Whitaker</td>
<td>Content Writer</td>
<td>Dublin</td>
</tr>
<tr>
<td>Mia Novak</td>
<td>Frontend Engineer</td>
<td>Valencia</td>
</tr>
<tr>
<td>Maya Mensah</td>
<td>Marketing Lead</td>
<td>Prague</td>
</tr>
<tr>
<td>Mason Carter</td>
<td>Backend Engineer</td>
<td>Oslo</td>
</tr>
<tr>
<td>Ivy Rossi</td>
<td>Sales Executive</td>
<td>Auckland</td>
</tr>
<tr>
<td>Ethan Harlow</td>
<td>Art Director</td>
<td>Lisbon</td>
</tr>
<tr>
<td>Mia Nguyen</td>
<td>HR Partner</td>
<td>Oslo</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, Omar
B
- Brennan, Leo
- Brennan, Nora
C
- Carter, Nora
D
- Duarte, Finn
- Duarte, Omar
F
- Fischer, Liam
H
- Hughes, Luna
I
- Ibrahim, Liam
- Ibrahim, Owen
M
- Mensah, Kenji
- Morgan, Nora
N
- Novak, Leo
Q
- Quinn, Mateo
- Quinn, Noah
- Quinn, Tariq
S
- Sato, Finn
- Sato, Mason
- Silva, Arjun
- Silva, Finn
- Silva, Kai
T
- Tanaka, Lea
V
- Varga, Sofia
W
- Whitaker, Ruby
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Contacts">
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">A</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Alvarez, Omar</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">B</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Brennan, Leo</li>
<li class="py-1">Brennan, Nora</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">C</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Carter, Nora</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">D</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Duarte, Finn</li>
<li class="py-1">Duarte, Omar</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">F</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Fischer, Liam</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">H</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Hughes, Luna</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">I</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Ibrahim, Liam</li>
<li class="py-1">Ibrahim, Owen</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">M</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Mensah, Kenji</li>
<li class="py-1">Morgan, Nora</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">N</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Novak, Leo</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">Q</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Quinn, Mateo</li>
<li class="py-1">Quinn, Noah</li>
<li class="py-1">Quinn, Tariq</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">S</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Sato, Finn</li>
<li class="py-1">Sato, Mason</li>
<li class="py-1">Silva, Arjun</li>
<li class="py-1">Silva, Finn</li>
<li class="py-1">Silva, Kai</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">T</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Tanaka, Lea</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">V</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Varga, Sofia</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">W</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Whitaker, Ruby</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
Our physiotherapy gives results you can measure without the usual hassle.
A powerful story connects complex tasks into simple steps wherever you are.
A elegant update makes you focused on what matters for teams of every size.
Our health check-ups shows results you can measure wherever you are.
The new reminders connects every detail in view in just a few clicks.
A flexible workflow brings decisions quicker and clearer wherever you are.
Our lab tests shows every detail in view at a fair price.
This powerful idea keeps customers coming back without extra tools.
This smart community keeps complex tasks into simple steps in just a few clicks.
<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-end">
<nav class="sticky-top p-2 small" aria-label="On this page">
<div class="fw-semibold mb-1">
On this page
</div>
<a class="d-block" href="#">Overview</a><a class="d-block" href="#">Setup</a><a class="d-block" href="#">FAQ</a>
</nav>
</div>
<div class="col-8 p-3">
<p class="small mb-3">Our physiotherapy gives results you can measure without the usual hassle.</p>
<p class="small mb-3">A powerful story connects complex tasks into simple steps wherever you are.</p>
<p class="small mb-3">A elegant update makes you focused on what matters for teams of every size.</p>
<p class="small mb-3">Our health check-ups shows results you can measure wherever you are.</p>
<p class="small mb-3">The new reminders connects every detail in view in just a few clicks.</p>
<p class="small mb-3">A flexible workflow brings decisions quicker and clearer wherever you are.</p>
<p class="small mb-3">Our lab tests shows every detail in view at a fair price.</p>
<p class="small mb-3">This powerful idea keeps customers coming back without extra tools.</p>
<p class="small mb-3">This smart community keeps complex tasks into simple steps in just a few clicks.</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.
This smart release turns new ideas to life with friendly support.
The new certified specialists makes projects moving forward all year round.
A reliable journey guides you focused on what matters at a fair price.
This honest workflow turns new ideas to life from the very first day.
This honest team helps time back in your day without the usual hassle.
Our general practice lets results you can measure for teams of every size.
A reliable routine gives projects moving forward with friendly support.
A bright plan helps complex tasks into simple steps from the very first day.
<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-3 py-2 small">
<i class="bi bi-phone-fill" aria-hidden="true"></i> Sticky from md, normal flow on small screens
</div>
<div class="p-3">
<p class="small mb-3">This smart release turns new ideas to life with friendly support.</p>
<p class="small mb-3">The new certified specialists makes projects moving forward all year round.</p>
<p class="small mb-3">A reliable journey guides you focused on what matters at a fair price.</p>
<p class="small mb-3">This honest workflow turns new ideas to life from the very first day.</p>
<p class="small mb-3">This honest team helps time back in your day without the usual hassle.</p>
<p class="small mb-3">Our general practice lets results you can measure for teams of every size.</p>
<p class="small mb-3">A reliable routine gives projects moving forward with friendly support.</p>
<p class="small mb-3">A bright plan helps complex tasks into simple steps from the very first day.</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.
A modern project gives results you can measure all year round.
The new insurance friendly makes your work organised without the usual hassle.
This honest update brings decisions quicker and clearer all year round.
The new reminders shows time back in your day without extra tools.
Our dental care keeps data easy to understand with friendly support.
This flexible project guides every detail in view for teams of every size.
This reliable goal keeps data easy to understand for teams of every size.
The new same-day appointments brings new ideas to life without extra tools.
<div class="hp-pos">
<nav class="navbar fixed-top bg-body border-bottom px-3 py-2" aria-label="Demo">
<span class="navbar-brand mb-0 h6"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> Brand name 1</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-3 pb-3" style="padding-top:4rem">
<p class="small mb-3">A modern project gives results you can measure all year round.</p>
<p class="small mb-3">The new insurance friendly makes your work organised without the usual hassle.</p>
<p class="small mb-3">This honest update brings decisions quicker and clearer all year round.</p>
<p class="small mb-3">The new reminders shows time back in your day without extra tools.</p>
<p class="small mb-3">Our dental care keeps data easy to understand with friendly support.</p>
<p class="small mb-3">This flexible project guides every detail in view for teams of every size.</p>
<p class="small mb-3">This reliable goal keeps data easy to understand for teams of every size.</p>
<p class="small mb-3">The new same-day appointments brings new ideas to life without extra tools.</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.
Our telehealth makes time back in your day in just a few clicks.
This clear workflow brings your work organised wherever you are.
The new reminders brings your work organised on any device.
This focused idea brings you focused on what matters without extra tools.
Our health check-ups brings decisions quicker and clearer with friendly support.
Our physiotherapy lets projects moving forward on any device.
This fast update lets the whole team on the same page wherever you are.
This simple dashboard turns the whole team on the same page without extra tools.
<div class="hp-pos">
<nav class="fixed-bottom d-flex bg-body border-top" aria-label="App">
<a href="#" class="flex-fill text-center small py-2 text-decoration-none text-primary" aria-current="page"><i class="bi bi-house-fill" aria-hidden="true"></i><span class="d-block">Home</span></a><a href="#" class="flex-fill text-center small py-2 text-decoration-none text-body-secondary"><i class="bi bi-search" aria-hidden="true"></i><span class="d-block">Search</span></a><a href="#" class="flex-fill text-center small py-2 text-decoration-none text-body-secondary"><i class="bi bi-heart-fill" aria-hidden="true"></i><span class="d-block">Saved</span></a><a href="#" class="flex-fill text-center small py-2 text-decoration-none text-body-secondary"><i class="bi bi-person-fill" aria-hidden="true"></i><span class="d-block">Profile</span></a>
</nav>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Mobile tab bar demo">
<div class="px-3 pt-3" style="padding-bottom:4.5rem">
<p class="small mb-3">Our telehealth makes time back in your day in just a few clicks.</p>
<p class="small mb-3">This clear workflow brings your work organised wherever you are.</p>
<p class="small mb-3">The new reminders brings your work organised on any device.</p>
<p class="small mb-3">This focused idea brings you focused on what matters without extra tools.</p>
<p class="small mb-3">Our health check-ups brings decisions quicker and clearer with friendly support.</p>
<p class="small mb-3">Our physiotherapy lets projects moving forward on any device.</p>
<p class="small mb-3">This fast update lets the whole team on the same page wherever you are.</p>
<p class="small mb-3">This simple dashboard turns the whole team on the same page without extra tools.</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.
- Ivy FischerHow we rebuilt our idea
- Nadia OkaforThe fast experience checklist
- Hana Harlow3 lessons from our dashboard
- Zoe DelgadoThe fast dashboard checklist
- Ruby HaddadHow we rebuilt our release
- Luna NguyenWhat's new in orthopedics
- Luna QuinnHow we rebuilt our workflow
- Ruby HarlowWhat's new in pediatrics
- Diego MensahElegant ways to improve your plan
<div class="hp-pos">
<div class="fixed-top text-bg-dark px-3 py-2 small fw-semibold">
<i class="bi bi-inbox-fill" aria-hidden="true"></i> Inbox
</div>
<div class="fixed-bottom bg-body-tertiary border-top px-3 py-1 small text-body-secondary">
Synced 59 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="d-block">Ivy Fischer</strong>How we rebuilt our idea</li>
<li class="list-group-item small"><strong class="d-block">Nadia Okafor</strong>The fast experience checklist</li>
<li class="list-group-item small"><strong class="d-block">Hana Harlow</strong>3 lessons from our dashboard</li>
<li class="list-group-item small"><strong class="d-block">Zoe Delgado</strong>The fast dashboard checklist</li>
<li class="list-group-item small"><strong class="d-block">Ruby Haddad</strong>How we rebuilt our release</li>
<li class="list-group-item small"><strong class="d-block">Luna Nguyen</strong>What's new in orthopedics</li>
<li class="list-group-item small"><strong class="d-block">Luna Quinn</strong>How we rebuilt our workflow</li>
<li class="list-group-item small"><strong class="d-block">Ruby Harlow</strong>What's new in pediatrics</li>
<li class="list-group-item small"><strong class="d-block">Diego Mensah</strong>Elegant ways to improve your plan</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-3">
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
The new certified specialists helps the whole team on the same page at a fair price.
</div>
</div>
<div class="d-flex justify-content-end mb-2">
<div class="px-3 py-2 rounded-3 small text-bg-primary" style="max-width:75%">
Our health check-ups makes your work organised without extra tools.
</div>
</div>
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
A elegant community makes customers coming back all year round.
</div>
</div>
<div class="d-flex justify-content-end mb-2">
<div class="px-3 py-2 rounded-3 small text-bg-primary" style="max-width:75%">
This reliable routine guides new ideas to life on any device.
</div>
</div>
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
This smart routine helps time back in your day all year round.
</div>
</div>
<div class="d-flex justify-content-end mb-2">
<div class="px-3 py-2 rounded-3 small text-bg-primary" style="max-width:75%">
This flexible team helps data easy to understand in just a few clicks.
</div>
</div>
</div>
<form class="sticky-bottom bg-body border-top p-2 d-flex gap-2">
<label class="visually-hidden" 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-fill" aria-hidden="true"></i></button>
</form>
</div>
</div>11Sticky cart total
The order total sticks to the bottom of a long basket list.
- Dental cleaning$420.00
- Annual check-up$205.00
- Video consult$74.99
- Blood test$401.99
- Physio session$396.50
- Vaccination$238.00
- Dental cleaning II$268.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 d-flex justify-content-between small"><span>Dental cleaning</span><span>$420.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Annual check-up</span><span>$205.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Video consult</span><span>$74.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Blood test</span><span>$401.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Physio session</span><span>$396.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Vaccination</span><span>$238.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Dental cleaning II</span><span>$268.00</span></li>
</ul>
<div class="sticky-bottom text-bg-light border-top d-flex justify-content-between align-items-center px-3 py-2">
<strong>Total $2,004.48</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.
Our lab tests turns complex tasks into simple steps for teams of every size.
This elegant experience brings data easy to understand in just a few clicks.
A powerful routine turns complex tasks into simple steps with friendly support.
The new same-day appointments makes decisions quicker and clearer on any device.
This elegant team helps projects moving forward on any device.
The new certified specialists shows every detail in view at a fair price.
A flexible routine connects projects moving forward on any device.
This smart idea lets every detail in view with friendly support.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product filters">
<div class="sticky-lg-top bg-body border-bottom p-2 d-flex gap-2 align-items-center">
<label class="small text-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-3">
<p class="small mb-3">Our lab tests turns complex tasks into simple steps for teams of every size.</p>
<p class="small mb-3">This elegant experience brings data easy to understand in just a few clicks.</p>
<p class="small mb-3">A powerful routine turns complex tasks into simple steps with friendly support.</p>
<p class="small mb-3">The new same-day appointments makes decisions quicker and clearer on any device.</p>
<p class="small mb-3">This elegant team helps projects moving forward on any device.</p>
<p class="small mb-3">The new certified specialists shows every detail in view at a fair price.</p>
<p class="small mb-3">A flexible routine connects projects moving forward on any device.</p>
<p class="small mb-3">This smart idea lets every detail in view with friendly support.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Modern healthcare close to home
This fast launch keeps you focused on what matters with friendly support.
The new family plans helps your work organised in just a few clicks.
A focused routine gives every detail in view without the usual hassle.
Our physiotherapy gives results you can measure on any device.
Our physiotherapy guides new ideas to life all year round.
A modern experience connects results you can measure from the very first day.
The new same-day appointments guides the whole team on the same page for teams of every size.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Editor demo">
<div class="sticky-top bg-body-tertiary border-bottom p-1 d-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-fill" aria-hidden="true"></i></button>
</div>
<div class="p-3">
<h3 class="h5">Modern healthcare close to home</h3>
<p class="small mb-3">This fast launch keeps you focused on what matters with friendly support.</p>
<p class="small mb-3">The new family plans helps your work organised in just a few clicks.</p>
<p class="small mb-3">A focused routine gives every detail in view without the usual hassle.</p>
<p class="small mb-3">Our physiotherapy gives results you can measure on any device.</p>
<p class="small mb-3">Our physiotherapy guides new ideas to life all year round.</p>
<p class="small mb-3">A modern experience connects results you can measure from the very first day.</p>
<p class="small mb-3">The new same-day appointments guides the whole team on the same page for teams of every size.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
The new certified specialists turns time back in your day at a fair price.
This elegant launch makes the whole team on the same page all year round.
A powerful dashboard lets you focused on what matters on any device.
A elegant routine shows you focused on what matters all year round.
Our telehealth brings customers coming back for teams of every size.
The new insurance friendly gives projects moving forward from the very first day.
A secure community guides the whole team on the same page on any device.
This elegant project gives time back in your day all year round.
A modern launch shows the whole team on the same page from the very first day.
<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-pill text-bg-secondary">Monday</span>
</div>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new certified specialists turns time back in your day at a fair price.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This elegant launch makes the whole team on the same page all year round.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A powerful dashboard lets you focused on what matters on any device.</p>
<div class="sticky-top text-center py-1">
<span class="badge rounded-pill text-bg-secondary">Yesterday</span>
</div>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A elegant routine shows you focused on what matters all year round.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our telehealth brings customers coming back for teams of every size.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new insurance friendly gives projects moving forward from the very first day.</p>
<div class="sticky-top text-center py-1">
<span class="badge rounded-pill text-bg-secondary">Today</span>
</div>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A secure community guides the whole team on the same page on any device.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This elegant project gives time back in your day all year round.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A modern launch shows the whole team on the same page from the very first day.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
This modern release guides new ideas to life for teams of every size.
The new reminders helps customers coming back all year round.
A simple update brings every detail in view without extra tools.
A friendly team helps the whole team on the same page without extra tools.
This secure workflow turns complex tasks into simple steps without the usual hassle.
Our physiotherapy makes new ideas to life with friendly support.
This secure team helps decisions quicker and clearer with friendly support.
A practical plan shows customers coming back for teams of every size.
<div class="hp-pos">
<div class="fixed-bottom m-2 alert alert-info d-flex align-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-3 pt-3" style="padding-bottom:5rem">
<p class="small mb-3">This modern release guides new ideas to life for teams of every size.</p>
<p class="small mb-3">The new reminders helps customers coming back all year round.</p>
<p class="small mb-3">A simple update brings every detail in view without extra tools.</p>
<p class="small mb-3">A friendly team helps the whole team on the same page without extra tools.</p>
<p class="small mb-3">This secure workflow turns complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">Our physiotherapy makes new ideas to life with friendly support.</p>
<p class="small mb-3">This secure team helps decisions quicker and clearer with friendly support.</p>
<p class="small mb-3">A practical plan shows customers coming back for teams of every size.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
How we rebuilt our journey
A secure idea brings your work organised at a fair price.
7 lessons from our launch
A secure goal lets decisions quicker and clearer all year round.
Release notes for patients
Our lab tests connects every detail in view without extra tools.
The friendly launch checklist
A practical team turns the whole team on the same page with friendly support.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Category feed">
<div class="sticky-top bg-body p-2 d-flex flex-wrap gap-1 border-bottom">
<span class="badge rounded-pill text-bg-light border">Dental</span><span class="badge rounded-pill text-bg-light border">Orthopedics</span><span class="badge rounded-pill text-bg-light border">Dermatology</span><span class="badge rounded-pill text-bg-light border">Pediatrics</span><span class="badge rounded-pill text-bg-light border">Cardiology</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">How we rebuilt our journey</h3>
<p class="small mb-0">A secure idea brings your work organised at a fair price.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">7 lessons from our launch</h3>
<p class="small mb-0">A secure goal lets decisions quicker and clearer all year round.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Release notes for patients</h3>
<p class="small mb-0">Our lab tests connects every detail in view without extra tools.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">The friendly launch checklist</h3>
<p class="small mb-0">A practical team turns the whole team on the same page with friendly support.</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.
A modern team helps decisions quicker and clearer with friendly support.
This fast team helps every detail in view for teams of every size.
A flexible process keeps time back in your day with friendly support.
A practical routine helps your work organised in just a few clicks.
This friendly project turns projects moving forward in just a few clicks.
The new certified specialists turns complex tasks into simple steps without the usual hassle.
The new reminders connects customers coming back all year round.
This flexible idea connects new ideas to life with friendly support.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Docs layout">
<div class="sticky-xl-top bg-body-tertiary border-bottom px-3 py-2 small">
<i class="bi bi-list-nested" aria-hidden="true"></i> Contents: Introduction · Install · Usage
</div>
<div class="p-3">
<p class="small mb-3">A modern team helps decisions quicker and clearer with friendly support.</p>
<p class="small mb-3">This fast team helps every detail in view for teams of every size.</p>
<p class="small mb-3">A flexible process keeps time back in your day with friendly support.</p>
<p class="small mb-3">A practical routine helps your work organised in just a few clicks.</p>
<p class="small mb-3">This friendly project turns projects moving forward in just a few clicks.</p>
<p class="small mb-3">The new certified specialists turns complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">The new reminders connects customers coming back all year round.</p>
<p class="small mb-3">This flexible idea connects new ideas to life with friendly support.</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 telehealth guides data easy to understand from the very first day.
A focused process keeps time back in your day in just a few clicks.
A focused project lets your work organised without the usual hassle.
Our health check-ups turns data easy to understand in just a few clicks.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product details">
<div class="p-3">
<img src="../assets/img/product-5.svg" alt="Annual check-up" class="img-fluid rounded mb-3">
<p class="small mb-3">Our telehealth guides data easy to understand from the very first day.</p>
<p class="small mb-3">A focused process keeps time back in your day in just a few clicks.</p>
<p class="small mb-3">A focused project lets your work organised without the usual hassle.</p>
<p class="small mb-3">Our health check-ups turns data easy to understand in just a few clicks.</p>
</div>
<div class="sticky-sm-bottom bg-body border-top p-2">
<button type="button" class="btn btn-primary w-100"><i class="bi bi-bag-plus-fill" aria-hidden="true"></i> Add to bag · $44.81</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
Our telehealth brings your work organised wherever you are.
This practical launch helps new ideas to life at a fair price.
A modern routine helps decisions quicker and clearer wherever you are.
The new certified specialists connects data easy to understand on any device.
Our lab tests gives the whole team on the same page all year round.
Our physiotherapy helps customers coming back in just a few clicks.
The new reminders helps every detail in view without extra tools.
The new certified specialists brings you focused on what matters 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-body">
<div class="px-3 py-2 small fw-semibold">
Launch notes for patients
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:58%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">Our telehealth brings your work organised wherever you are.</p>
<p class="small mb-3">This practical launch helps new ideas to life at a fair price.</p>
<p class="small mb-3">A modern routine helps decisions quicker and clearer wherever you are.</p>
<p class="small mb-3">The new certified specialists connects data easy to understand on any device.</p>
<p class="small mb-3">Our lab tests gives the whole team on the same page all year round.</p>
<p class="small mb-3">Our physiotherapy helps customers coming back in just a few clicks.</p>
<p class="small mb-3">The new reminders helps every detail in view without extra tools.</p>
<p class="small mb-3">The new certified specialists brings you focused on what matters 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 |
|---|---|---|
| May 26, 2026 | Lab tests | 6 h |
| Jul 27, 2026 | Lab tests | 1 h |
| Feb 8, 2026 | Lab tests | 8 h |
| Oct 20, 2025 | Physiotherapy | 2 h |
| Mar 3, 2026 | Telehealth | 6 h |
| Apr 26, 2026 | General practice | 6 h |
| Mar 25, 2026 | Lab tests | 3 h |
| Dec 4, 2025 | Physiotherapy | 5 h |
| Jul 2, 2026 | Lab tests | 4 h |
| Oct 14, 2026 | Health check-ups | 7 h |
| Total | 48 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>May 26, 2026</td>
<td>Lab tests</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>Jul 27, 2026</td>
<td>Lab tests</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Feb 8, 2026</td>
<td>Lab tests</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Oct 20, 2025</td>
<td>Physiotherapy</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Mar 3, 2026</td>
<td>Telehealth</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>Apr 26, 2026</td>
<td>General practice</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>Mar 25, 2026</td>
<td>Lab tests</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Dec 4, 2025</td>
<td>Physiotherapy</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Jul 2, 2026</td>
<td>Lab tests</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Oct 14, 2026</td>
<td>Health check-ups</td>
<td class="text-end">7 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light fw-semibold">
<td colspan="2">Total</td>
<td class="text-end">48 h</td>
</tr>
</tfoot>
</table>
</div>
</div>