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.
This focused experience brings decisions quicker and clearer without extra tools.
The new transparent reports makes the whole team on the same page from the very first day.
A elegant project brings results you can measure from the very first day.
A calm process keeps every detail in view in just a few clicks.
A flexible community keeps you focused on what matters wherever you are.
This fast plan lets data easy to understand without the usual hassle.
Our volunteer programs keeps complex tasks into simple steps in just a few clicks.
A honest launch brings new ideas to life all year round.
<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> What's new in animals
</header>
<div class="p-4">
<p class="small mb-4">This focused experience brings decisions quicker and clearer without extra tools.</p>
<p class="small mb-4">The new transparent reports makes the whole team on the same page from the very first day.</p>
<p class="small mb-4">A elegant project brings results you can measure from the very first day.</p>
<p class="small mb-4">A calm process keeps every detail in view in just a few clicks.</p>
<p class="small mb-4">A flexible community keeps you focused on what matters wherever you are.</p>
<p class="small mb-4">This fast plan lets data easy to understand without the usual hassle.</p>
<p class="small mb-4">Our volunteer programs keeps complex tasks into simple steps in just a few clicks.</p>
<p class="small mb-4">A honest launch brings new ideas to life all year round.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
A practical community lets data easy to understand without extra tools.
A friendly community gives results you can measure without the usual hassle.
Our disaster response helps customers coming back without extra tools.
This simple launch brings the whole team on the same page at a fair price.
The new tax receipts helps new ideas to life with friendly support.
Our education fund lets projects moving forward on any device.
The new volunteer network helps customers coming back 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">A practical community lets data easy to understand without extra tools.</p>
<p class="small mb-4">A friendly community gives results you can measure without the usual hassle.</p>
<p class="small mb-4">Our disaster response helps customers coming back without extra tools.</p>
<p class="small mb-4">This simple launch brings the whole team on the same page at a fair price.</p>
<p class="small mb-4">The new tax receipts helps new ideas to life with friendly support.</p>
<p class="small mb-4">Our education fund lets projects moving forward on any device.</p>
<p class="small mb-4">The new volunteer network helps customers coming back 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 |
|---|---|---|
| Mia Brennan | QA Engineer | Auckland |
| Leo Varga | Finance Lead | Montreal |
| Ravi Haddad | HR Partner | Edinburgh |
| Hana Brennan | Customer Success | Copenhagen |
| Kenji Whitaker | Product Designer | Seoul |
| Omar Okafor | QA Engineer | Prague |
| Elena Okafor | Marketing Lead | Dublin |
| Jonah Nguyen | Frontend Engineer | Edinburgh |
| Zoe Morgan | Marketing Lead | Lisbon |
| Chloe Larsen | Support Specialist | Barcelona |
| Ruby Brennan | Customer Success | Valencia |
| Amara Rossi | Data Analyst | Denver |
<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>Mia Brennan</td>
<td>QA Engineer</td>
<td>Auckland</td>
</tr>
<tr>
<td>Leo Varga</td>
<td>Finance Lead</td>
<td>Montreal</td>
</tr>
<tr>
<td>Ravi Haddad</td>
<td>HR Partner</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Hana Brennan</td>
<td>Customer Success</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Kenji Whitaker</td>
<td>Product Designer</td>
<td>Seoul</td>
</tr>
<tr>
<td>Omar Okafor</td>
<td>QA Engineer</td>
<td>Prague</td>
</tr>
<tr>
<td>Elena Okafor</td>
<td>Marketing Lead</td>
<td>Dublin</td>
</tr>
<tr>
<td>Jonah Nguyen</td>
<td>Frontend Engineer</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Zoe Morgan</td>
<td>Marketing Lead</td>
<td>Lisbon</td>
</tr>
<tr>
<td>Chloe Larsen</td>
<td>Support Specialist</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Ruby Brennan</td>
<td>Customer Success</td>
<td>Valencia</td>
</tr>
<tr>
<td>Amara Rossi</td>
<td>Data Analyst</td>
<td>Denver</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, Freya
- Ashford, Liam
- Ashford, Nora
C
- Carter, Maya
D
- Duarte, Chloe
- Duarte, Omar
F
- Fischer, Mateo
H
- Haddad, Finn
- Haddad, Kenji
K
- Kowalski, Maya
L
- Lindqvist, Zoe
M
- Mensah, Ava
- Moreau, Isla
N
- Nguyen, Ravi
P
- Patel, Kai
- Patel, Liam
- Patel, Luna
- Patel, Ravi
S
- Sato, Nadia
T
- Tanaka, Ava
- Tanaka, Maya
- Tanaka, Ravi
V
- Varga, Theo
W
- Whitaker, Luna
<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, Freya</li>
<li class="py-1">Ashford, Liam</li>
<li class="py-1">Ashford, Nora</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">C</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Carter, Maya</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">Duarte, Chloe</li>
<li class="py-1">Duarte, Omar</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, Mateo</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, Finn</li>
<li class="py-1">Haddad, Kenji</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">Kowalski, Maya</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">Lindqvist, Zoe</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, Ava</li>
<li class="py-1">Moreau, Isla</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, Ravi</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, Kai</li>
<li class="py-1">Patel, Liam</li>
<li class="py-1">Patel, Luna</li>
<li class="py-1">Patel, Ravi</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">S</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Sato, Nadia</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>
<li class="py-1">Tanaka, Maya</li>
<li class="py-1">Tanaka, Ravi</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, Theo</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">W</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Whitaker, Luna</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
A calm team lets time back in your day without the usual hassle.
This honest story helps projects moving forward on any device.
A calm process gives customers coming back without extra tools.
This simple idea lets data easy to understand for teams of every size.
The new tax receipts guides you focused on what matters at a fair price.
A secure idea guides customers coming back with friendly support.
The new local partners turns time back in your day all year round.
Our animal rescue helps new ideas to life on any device.
A secure journey connects you focused on what matters 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-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">A calm team lets time back in your day without the usual hassle.</p>
<p class="small mb-4">This honest story helps projects moving forward on any device.</p>
<p class="small mb-4">A calm process gives customers coming back without extra tools.</p>
<p class="small mb-4">This simple idea lets data easy to understand for teams of every size.</p>
<p class="small mb-4">The new tax receipts guides you focused on what matters at a fair price.</p>
<p class="small mb-4">A secure idea guides customers coming back with friendly support.</p>
<p class="small mb-4">The new local partners turns time back in your day all year round.</p>
<p class="small mb-4">Our animal rescue helps new ideas to life on any device.</p>
<p class="small mb-4">A secure journey connects you focused on what matters 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.
A practical story helps results you can measure without extra tools.
Our disaster response keeps new ideas to life in just a few clicks.
A secure journey connects decisions quicker and clearer with friendly support.
This elegant process makes projects moving forward all year round.
Our education fund guides your work organised with friendly support.
Our food relief brings customers coming back with friendly support.
Our disaster response turns results you can measure for teams of every size.
This smart launch helps results you can measure with friendly support.
<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">A practical story helps results you can measure without extra tools.</p>
<p class="small mb-4">Our disaster response keeps new ideas to life in just a few clicks.</p>
<p class="small mb-4">A secure journey connects decisions quicker and clearer with friendly support.</p>
<p class="small mb-4">This elegant process makes projects moving forward all year round.</p>
<p class="small mb-4">Our education fund guides your work organised with friendly support.</p>
<p class="small mb-4">Our food relief brings customers coming back with friendly support.</p>
<p class="small mb-4">Our disaster response turns results you can measure for teams of every size.</p>
<p class="small mb-4">This smart launch helps results you can measure with friendly support.</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.
Our disaster response makes results you can measure without extra tools.
A modern dashboard lets every detail in view at a fair price.
This practical story turns new ideas to life all year round.
The new secure giving gives complex tasks into simple steps on any device.
Our food relief connects your work organised with friendly support.
The new transparent reports brings complex tasks into simple steps in just a few clicks.
The new secure giving shows every detail in view at a fair price.
This friendly goal makes projects moving forward wherever you are.
<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 11</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">Our disaster response makes results you can measure without extra tools.</p>
<p class="small mb-4">A modern dashboard lets every detail in view at a fair price.</p>
<p class="small mb-4">This practical story turns new ideas to life all year round.</p>
<p class="small mb-4">The new secure giving gives complex tasks into simple steps on any device.</p>
<p class="small mb-4">Our food relief connects your work organised with friendly support.</p>
<p class="small mb-4">The new transparent reports brings complex tasks into simple steps in just a few clicks.</p>
<p class="small mb-4">The new secure giving shows every detail in view at a fair price.</p>
<p class="small mb-4">This friendly goal makes projects moving forward wherever you are.</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 food relief turns time back in your day at a fair price.
The new volunteer network turns new ideas to life from the very first day.
The new tax receipts gives every detail in view all year round.
The new impact tracking lets time back in your day at a fair price.
This focused launch lets time back in your day at a fair price.
Our animal rescue lets every detail in view without extra tools.
The new local partners keeps you focused on what matters at a fair price.
The new impact tracking makes results you can measure all year round.
<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">Our food relief turns time back in your day at a fair price.</p>
<p class="small mb-4">The new volunteer network turns new ideas to life from the very first day.</p>
<p class="small mb-4">The new tax receipts gives every detail in view all year round.</p>
<p class="small mb-4">The new impact tracking lets time back in your day at a fair price.</p>
<p class="small mb-4">This focused launch lets time back in your day at a fair price.</p>
<p class="small mb-4">Our animal rescue lets every detail in view without extra tools.</p>
<p class="small mb-4">The new local partners keeps you focused on what matters at a fair price.</p>
<p class="small mb-4">The new impact tracking makes results you can measure all year round.</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.
- Finn BrennanPractical ways to improve your story
- Leo Morgan8 lessons from our story
- Priya QuinnExperience notes for donors
- Ava KowalskiThe honest project checklist
- Mateo WhitakerSimple ways to improve your journey
- Mateo QuinnWhat's new in animals
- Felix MorganHow we rebuilt our routine
- Tariq SatoInside the bright update
- Felix HarlowInside the modern process
<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 54 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">Finn Brennan</strong>Practical ways to improve your story</li>
<li class="list-group-item small"><strong class="block">Leo Morgan</strong>8 lessons from our story</li>
<li class="list-group-item small"><strong class="block">Priya Quinn</strong>Experience notes for donors</li>
<li class="list-group-item small"><strong class="block">Ava Kowalski</strong>The honest project checklist</li>
<li class="list-group-item small"><strong class="block">Mateo Whitaker</strong>Simple ways to improve your journey</li>
<li class="list-group-item small"><strong class="block">Mateo Quinn</strong>What's new in animals</li>
<li class="list-group-item small"><strong class="block">Felix Morgan</strong>How we rebuilt our routine</li>
<li class="list-group-item small"><strong class="block">Tariq Sato</strong>Inside the bright update</li>
<li class="list-group-item small"><strong class="block">Felix Harlow</strong>Inside the modern process</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%">
This practical launch keeps every detail in view at a fair price.
</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%">
Our clean water brings the whole team on the same page 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%">
The new transparent reports gives time back in your day 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%">
A fast project keeps complex tasks into simple steps from the very first day.
</div>
</div>
<div class="flex mb-2">
<div class="px-4 py-2 rounded-lg small bg-surface-3" style="max-width:75%">
The new transparent reports brings every detail in view with friendly support.
</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 reliable process keeps you focused on what matters in just a few clicks.
</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.
- Monthly gift$67.99
- Tree planting$468.99
- Emergency fund$419.00
- Shelter support$187.50
- School kit$90.00
- Meal pack$194.00
- Monthly gift Plus$273.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>Monthly gift</span><span>$67.99</span></li>
<li class="list-group-item flex justify-between small"><span>Tree planting</span><span>$468.99</span></li>
<li class="list-group-item flex justify-between small"><span>Emergency fund</span><span>$419.00</span></li>
<li class="list-group-item flex justify-between small"><span>Shelter support</span><span>$187.50</span></li>
<li class="list-group-item flex justify-between small"><span>School kit</span><span>$90.00</span></li>
<li class="list-group-item flex justify-between small"><span>Meal pack</span><span>$194.00</span></li>
<li class="list-group-item flex justify-between small"><span>Monthly gift Plus</span><span>$273.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,700.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.
The new secure giving helps results you can measure wherever you are.
This elegant team gives your work organised for teams of every size.
This honest dashboard helps your work organised from the very first day.
The new tax receipts connects the whole team on the same page all year round.
This smart launch shows complex tasks into simple steps with friendly support.
This practical story turns every detail in view on any device.
A honest goal shows every detail in view with friendly support.
This flexible community brings every detail in view all year round.
<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 secure giving helps results you can measure wherever you are.</p>
<p class="small mb-4">This elegant team gives your work organised for teams of every size.</p>
<p class="small mb-4">This honest dashboard helps your work organised from the very first day.</p>
<p class="small mb-4">The new tax receipts connects the whole team on the same page all year round.</p>
<p class="small mb-4">This smart launch shows complex tasks into simple steps with friendly support.</p>
<p class="small mb-4">This practical story turns every detail in view on any device.</p>
<p class="small mb-4">A honest goal shows every detail in view with friendly support.</p>
<p class="small mb-4">This flexible community brings every detail in view all year round.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Join a community that cares
A modern plan connects time back in your day with friendly support.
The new secure giving connects data easy to understand on any device.
A bright launch guides new ideas to life all year round.
This modern routine gives new ideas to life on any device.
Our volunteer programs guides the whole team on the same page wherever you are.
Our clean water helps you focused on what matters without the usual hassle.
This secure project guides time back in your day in just a few clicks.
<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">Join a community that cares</h3>
<p class="small mb-4">A modern plan connects time back in your day with friendly support.</p>
<p class="small mb-4">The new secure giving connects data easy to understand on any device.</p>
<p class="small mb-4">A bright launch guides new ideas to life all year round.</p>
<p class="small mb-4">This modern routine gives new ideas to life on any device.</p>
<p class="small mb-4">Our volunteer programs guides the whole team on the same page wherever you are.</p>
<p class="small mb-4">Our clean water helps you focused on what matters without the usual hassle.</p>
<p class="small mb-4">This secure project guides time back in your day in just a few clicks.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
This friendly dashboard turns data easy to understand on any device.
This practical routine turns results you can measure for teams of every size.
This honest team shows your work organised with friendly support.
A flexible experience helps decisions quicker and clearer on any device.
Our animal rescue keeps decisions quicker and clearer from the very first day.
The new local partners helps the whole team on the same page without extra tools.
A calm experience connects customers coming back with friendly support.
The new impact tracking turns decisions quicker and clearer for teams of every size.
A flexible community turns the whole team on the same page without the usual hassle.
<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 friendly dashboard turns data easy to understand on any device.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">This practical routine turns results you can measure for teams of every size.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">This honest team shows your work organised with friendly support.</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">A flexible experience helps decisions quicker and clearer on any device.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">Our animal rescue keeps decisions quicker and clearer from the very first day.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">The new local partners helps the whole team on the same page without extra tools.</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 calm experience connects customers coming back with friendly support.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">The new impact tracking turns decisions quicker and clearer for teams of every size.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">A flexible community turns the whole team on the same page without the usual hassle.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
A flexible update connects time back in your day at a fair price.
A elegant team shows your work organised with friendly support.
This honest routine brings customers coming back all year round.
A calm routine makes projects moving forward with friendly support.
This smart story gives customers coming back from the very first day.
This calm workflow guides new ideas to life wherever you are.
A powerful release lets your work organised in just a few clicks.
A flexible routine lets customers coming back on any device.
<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">A flexible update connects time back in your day at a fair price.</p>
<p class="small mb-4">A elegant team shows your work organised with friendly support.</p>
<p class="small mb-4">This honest routine brings customers coming back all year round.</p>
<p class="small mb-4">A calm routine makes projects moving forward with friendly support.</p>
<p class="small mb-4">This smart story gives customers coming back from the very first day.</p>
<p class="small mb-4">This calm workflow guides new ideas to life wherever you are.</p>
<p class="small mb-4">A powerful release lets your work organised in just a few clicks.</p>
<p class="small mb-4">A flexible routine lets customers coming back on any device.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
Team notes for donors
A reliable process shows time back in your day from the very first day.
5 lessons from our team
This bright update keeps customers coming back wherever you are.
How we rebuilt our goal
This modern dashboard turns projects moving forward on any device.
Inside the smart process
This calm team gives 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="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">Education</span><span class="badge rounded-full text-bg-light border">Environment</span><span class="badge rounded-full text-bg-light border">Relief</span><span class="badge rounded-full text-bg-light border">Animals</span><span class="badge rounded-full text-bg-light border">Health</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Team notes for donors</h3>
<p class="small mb-0">A reliable process shows time back in your day from the very first day.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">5 lessons from our team</h3>
<p class="small mb-0">This bright update keeps customers coming back wherever you are.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">How we rebuilt our goal</h3>
<p class="small mb-0">This modern dashboard turns projects moving forward on any device.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Inside the smart process</h3>
<p class="small mb-0">This calm team gives the whole team on the same page for teams of every size.</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.
The new tax receipts makes decisions quicker and clearer without extra tools.
A practical goal gives every detail in view without extra tools.
The new volunteer network lets time back in your day wherever you are.
The new volunteer network gives time back in your day at a fair price.
A reliable launch connects you focused on what matters for teams of every size.
This reliable routine connects customers coming back for teams of every size.
Our food relief guides you focused on what matters all year round.
A focused routine lets complex tasks into simple steps at a fair price.
<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">The new tax receipts makes decisions quicker and clearer without extra tools.</p>
<p class="small mb-4">A practical goal gives every detail in view without extra tools.</p>
<p class="small mb-4">The new volunteer network lets time back in your day wherever you are.</p>
<p class="small mb-4">The new volunteer network gives time back in your day at a fair price.</p>
<p class="small mb-4">A reliable launch connects you focused on what matters for teams of every size.</p>
<p class="small mb-4">This reliable routine connects customers coming back for teams of every size.</p>
<p class="small mb-4">Our food relief guides you focused on what matters all year round.</p>
<p class="small mb-4">A focused routine lets complex tasks into simple steps at a fair price.</p>
</div>
</div>
</div>18Checkout button on phones
sticky-sm-bottom sticks the call to action at the bottom from the sm breakpoint up.
A smart process connects the whole team on the same page wherever you are.
A flexible community helps decisions quicker and clearer all year round.
A simple dashboard gives your work organised from the very first day.
Our food relief gives decisions quicker and clearer all year round.
<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="Meal pack" class="img-fluid rounded-md mb-4">
<p class="small mb-4">A smart process connects the whole team on the same page wherever you are.</p>
<p class="small mb-4">A flexible community helps decisions quicker and clearer all year round.</p>
<p class="small mb-4">A simple dashboard gives your work organised from the very first day.</p>
<p class="small mb-4">Our food relief gives decisions quicker and clearer all year round.</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 · $20.02</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
A powerful project gives every detail in view on any device.
Our education fund gives you focused on what matters from the very first day.
A smart goal makes every detail in view at a fair price.
A flexible launch guides projects moving forward on any device.
This calm community lets every detail in view in just a few clicks.
A bright launch makes projects moving forward all year round.
This fast workflow lets decisions quicker and clearer from the very first day.
Our education fund turns new ideas to life with friendly support.
<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">
How we rebuilt our launch
</div>
<div class="progress rounded-none" role="progressbar" aria-label="Reading progress" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:76%">
</div>
</div>
</div>
<div class="p-4">
<p class="small mb-4">A powerful project gives every detail in view on any device.</p>
<p class="small mb-4">Our education fund gives you focused on what matters from the very first day.</p>
<p class="small mb-4">A smart goal makes every detail in view at a fair price.</p>
<p class="small mb-4">A flexible launch guides projects moving forward on any device.</p>
<p class="small mb-4">This calm community lets every detail in view in just a few clicks.</p>
<p class="small mb-4">A bright launch makes projects moving forward all year round.</p>
<p class="small mb-4">This fast workflow lets decisions quicker and clearer from the very first day.</p>
<p class="small mb-4">Our education fund turns new ideas to life with friendly support.</p>
</div>
</div>
</div>20Sticky table footer
A tfoot with sticky-bottom keeps the running total visible in a timesheet.
| Date | Task | Hours |
|---|---|---|
| Nov 28, 2025 | Animal rescue | 1 h |
| Nov 23, 2025 | Clean water | 2 h |
| Dec 1, 2025 | Volunteer programs | 2 h |
| Dec 7, 2025 | Clean water | 8 h |
| Jul 17, 2026 | Animal rescue | 4 h |
| May 23, 2026 | Animal rescue | 3 h |
| Jul 5, 2026 | Education fund | 4 h |
| Nov 19, 2025 | Disaster response | 8 h |
| Sep 11, 2026 | Education fund | 3 h |
| Sep 23, 2025 | Food relief | 3 h |
| Total | 38 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>Nov 28, 2025</td>
<td>Animal rescue</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Nov 23, 2025</td>
<td>Clean water</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Dec 1, 2025</td>
<td>Volunteer programs</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Dec 7, 2025</td>
<td>Clean water</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Jul 17, 2026</td>
<td>Animal rescue</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>May 23, 2026</td>
<td>Animal rescue</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Jul 5, 2026</td>
<td>Education fund</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Nov 19, 2025</td>
<td>Disaster response</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Sep 11, 2026</td>
<td>Education fund</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Sep 23, 2025</td>
<td>Food relief</td>
<td class="text-end">3 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light font-semibold">
<td colspan="2">Total</td>
<td class="text-end">38 h</td>
</tr>
</tfoot>
</table>
</div>
</div>