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 story brings results you can measure wherever you are.
The new secure payments shows projects moving forward without extra tools.
A practical journey connects projects moving forward with friendly support.
This friendly dashboard helps the whole team on the same page on any device.
A smart team helps the whole team on the same page for teams of every size.
This honest routine gives complex tasks into simple steps without extra tools.
A friendly project keeps results you can measure on any device.
The new hand-checked quality helps 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="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 experience
</header>
<div class="p-3">
<p class="small mb-3">A calm story brings results you can measure wherever you are.</p>
<p class="small mb-3">The new secure payments shows projects moving forward without extra tools.</p>
<p class="small mb-3">A practical journey connects projects moving forward with friendly support.</p>
<p class="small mb-3">This friendly dashboard helps the whole team on the same page on any device.</p>
<p class="small mb-3">A smart team helps the whole team on the same page for teams of every size.</p>
<p class="small mb-3">This honest routine gives complex tasks into simple steps without extra tools.</p>
<p class="small mb-3">A friendly project keeps results you can measure on any device.</p>
<p class="small mb-3">The new hand-checked quality helps the whole team on the same page without extra tools.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
A honest experience turns every detail in view without the usual hassle.
A elegant project connects your work organised without the usual hassle.
This modern release helps every detail in view without the usual hassle.
This reliable release guides complex tasks into simple steps for teams of every size.
The new hand-checked quality turns new ideas to life in just a few clicks.
A bright journey brings the whole team on the same page on any device.
This simple idea guides customers coming back all year round.
<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">A honest experience turns every detail in view without the usual hassle.</p>
<p class="small mb-3">A elegant project connects your work organised without the usual hassle.</p>
<p class="small mb-3">This modern release helps every detail in view without the usual hassle.</p>
<p class="small mb-3">This reliable release guides complex tasks into simple steps for teams of every size.</p>
<p class="small mb-3">The new hand-checked quality turns new ideas to life in just a few clicks.</p>
<p class="small mb-3">A bright journey brings the whole team on the same page on any device.</p>
<p class="small mb-3">This simple idea guides customers coming back all year round.</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 |
|---|---|---|
| Felix Morgan | Project Manager | Copenhagen |
| Kenji Silva | Finance Lead | Barcelona |
| Mason Carter | Support Specialist | Oslo |
| Zoe Harlow | Backend Engineer | Vancouver |
| Nadia Sato | Product Designer | Auckland |
| Ivy Alvarez | Backend Engineer | Prague |
| Felix Delgado | Data Analyst | Lisbon |
| Nora Hughes | Support Specialist | Copenhagen |
| Priya Varga | QA Engineer | Toronto |
| Mason Haddad | Content Writer | Barcelona |
| Zoe Larsen | Operations Manager | Montreal |
| Kai Hughes | Project Manager | Edinburgh |
<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>Felix Morgan</td>
<td>Project Manager</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Kenji Silva</td>
<td>Finance Lead</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Mason Carter</td>
<td>Support Specialist</td>
<td>Oslo</td>
</tr>
<tr>
<td>Zoe Harlow</td>
<td>Backend Engineer</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Nadia Sato</td>
<td>Product Designer</td>
<td>Auckland</td>
</tr>
<tr>
<td>Ivy Alvarez</td>
<td>Backend Engineer</td>
<td>Prague</td>
</tr>
<tr>
<td>Felix Delgado</td>
<td>Data Analyst</td>
<td>Lisbon</td>
</tr>
<tr>
<td>Nora Hughes</td>
<td>Support Specialist</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Priya Varga</td>
<td>QA Engineer</td>
<td>Toronto</td>
</tr>
<tr>
<td>Mason Haddad</td>
<td>Content Writer</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Zoe Larsen</td>
<td>Operations Manager</td>
<td>Montreal</td>
</tr>
<tr>
<td>Kai Hughes</td>
<td>Project Manager</td>
<td>Edinburgh</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
- Ashford, Ella
B
- Brennan, Amara
- Brennan, Ella
D
- Delgado, Lea
- Duarte, Isla
- Duarte, Jonah
H
- Hughes, Arjun
K
- Kim, Omar
L
- Larsen, Nora
N
- Nguyen, Felix
- Nguyen, Mia
O
- Ortega, Ivy
P
- Patel, Priya
R
- Rossi, Ava
- Rossi, Omar
S
- Sato, Amara
- Silva, Aria
- Silva, Mason
- Silva, Nadia
T
- Tanaka, Ella
- Tanaka, Luna
V
- Varga, Ella
- Varga, Ivy
W
- Whitaker, Diego
<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">Ashford, Ella</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, Amara</li>
<li class="py-1">Brennan, Ella</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">Delgado, Lea</li>
<li class="py-1">Duarte, Isla</li>
<li class="py-1">Duarte, Jonah</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, Arjun</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">K</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Kim, Omar</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">L</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Larsen, 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">Nguyen, Felix</li>
<li class="py-1">Nguyen, Mia</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">O</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Ortega, Ivy</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">P</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Patel, Priya</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">R</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Rossi, Ava</li>
<li class="py-1">Rossi, Omar</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, Amara</li>
<li class="py-1">Silva, Aria</li>
<li class="py-1">Silva, Mason</li>
<li class="py-1">Silva, Nadia</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, Ella</li>
<li class="py-1">Tanaka, Luna</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, Ella</li>
<li class="py-1">Varga, Ivy</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, Diego</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
This reliable goal guides your work organised without extra tools.
The new easy exchanges brings decisions quicker and clearer from the very first day.
Our loyalty rewards gives you focused on what matters all year round.
The new secure payments keeps data easy to understand without the usual hassle.
The new carbon-neutral delivery makes customers coming back on any device.
A calm community shows the whole team on the same page without the usual hassle.
The new member prices keeps results you can measure all year round.
A powerful goal lets decisions quicker and clearer without extra tools.
A elegant update brings projects moving forward wherever you are.
<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">This reliable goal guides your work organised without extra tools.</p>
<p class="small mb-3">The new easy exchanges brings decisions quicker and clearer from the very first day.</p>
<p class="small mb-3">Our loyalty rewards gives you focused on what matters all year round.</p>
<p class="small mb-3">The new secure payments keeps data easy to understand without the usual hassle.</p>
<p class="small mb-3">The new carbon-neutral delivery makes customers coming back on any device.</p>
<p class="small mb-3">A calm community shows the whole team on the same page without the usual hassle.</p>
<p class="small mb-3">The new member prices keeps results you can measure all year round.</p>
<p class="small mb-3">A powerful goal lets decisions quicker and clearer without extra tools.</p>
<p class="small mb-3">A elegant update brings projects moving forward wherever you are.</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 carbon-neutral delivery keeps complex tasks into simple steps from the very first day.
Our free shipping connects every detail in view all year round.
A focused journey turns data easy to understand without extra tools.
A smart release turns you focused on what matters with friendly support.
Our live order tracking brings your work organised for teams of every size.
The new carbon-neutral delivery turns new ideas to life with friendly support.
Our 30-day returns guides customers coming back in just a few clicks.
This calm idea makes every detail in view 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-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">The new carbon-neutral delivery keeps complex tasks into simple steps from the very first day.</p>
<p class="small mb-3">Our free shipping connects every detail in view all year round.</p>
<p class="small mb-3">A focused journey turns data easy to understand without extra tools.</p>
<p class="small mb-3">A smart release turns you focused on what matters with friendly support.</p>
<p class="small mb-3">Our live order tracking brings your work organised for teams of every size.</p>
<p class="small mb-3">The new carbon-neutral delivery turns new ideas to life with friendly support.</p>
<p class="small mb-3">Our 30-day returns guides customers coming back in just a few clicks.</p>
<p class="small mb-3">This calm idea makes every detail in view 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.
This secure idea keeps projects moving forward all year round.
Our secure checkout brings complex tasks into simple steps on any device.
Our secure checkout lets results you can measure from the very first day.
This bright workflow helps results you can measure from the very first day.
This modern experience helps projects moving forward without the usual hassle.
This flexible project shows complex tasks into simple steps from the very first day.
The new hand-checked quality gives decisions quicker and clearer without the usual hassle.
A elegant workflow turns complex tasks into simple steps all year round.
<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 17</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">This secure idea keeps projects moving forward all year round.</p>
<p class="small mb-3">Our secure checkout brings complex tasks into simple steps on any device.</p>
<p class="small mb-3">Our secure checkout lets results you can measure from the very first day.</p>
<p class="small mb-3">This bright workflow helps results you can measure from the very first day.</p>
<p class="small mb-3">This modern experience helps projects moving forward without the usual hassle.</p>
<p class="small mb-3">This flexible project shows complex tasks into simple steps from the very first day.</p>
<p class="small mb-3">The new hand-checked quality gives decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">A elegant workflow turns complex tasks into simple steps all year round.</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 carbon-neutral delivery helps data easy to understand all year round.
A practical goal turns projects moving forward with friendly support.
Our 30-day returns lets results you can measure with friendly support.
This simple routine guides customers coming back at a fair price.
This modern plan connects every detail in view without extra tools.
The new sustainable materials helps new ideas to life without extra tools.
The new sustainable materials guides results you can measure at a fair price.
A honest project brings your work organised for teams of every size.
<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">The new carbon-neutral delivery helps data easy to understand all year round.</p>
<p class="small mb-3">A practical goal turns projects moving forward with friendly support.</p>
<p class="small mb-3">Our 30-day returns lets results you can measure with friendly support.</p>
<p class="small mb-3">This simple routine guides customers coming back at a fair price.</p>
<p class="small mb-3">This modern plan connects every detail in view without extra tools.</p>
<p class="small mb-3">The new sustainable materials helps new ideas to life without extra tools.</p>
<p class="small mb-3">The new sustainable materials guides results you can measure at a fair price.</p>
<p class="small mb-3">A honest project brings your work organised for teams of every size.</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.
- Nora WhitakerThe bright update checklist
- Ava FischerSmart ways to improve your update
- Freya NguyenHow we rebuilt our update
- Liam RossiRelease notes for shoppers
- Leo KimWhat's new in home
- Noah MorganElegant ways to improve your project
- Finn VargaInside the modern team
- Amara HarlowHonest ways to improve your project
- Ava MoreauSmart ways to improve your update
<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 just now
</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">Nora Whitaker</strong>The bright update checklist</li>
<li class="list-group-item small"><strong class="d-block">Ava Fischer</strong>Smart ways to improve your update</li>
<li class="list-group-item small"><strong class="d-block">Freya Nguyen</strong>How we rebuilt our update</li>
<li class="list-group-item small"><strong class="d-block">Liam Rossi</strong>Release notes for shoppers</li>
<li class="list-group-item small"><strong class="d-block">Leo Kim</strong>What's new in home</li>
<li class="list-group-item small"><strong class="d-block">Noah Morgan</strong>Elegant ways to improve your project</li>
<li class="list-group-item small"><strong class="d-block">Finn Varga</strong>Inside the modern team</li>
<li class="list-group-item small"><strong class="d-block">Amara Harlow</strong>Honest ways to improve your project</li>
<li class="list-group-item small"><strong class="d-block">Ava Moreau</strong>Smart ways to improve your update</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 secure payments helps complex tasks into simple steps for teams of every size.
</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%">
The new sustainable materials helps decisions quicker and clearer for teams of every size.
</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 secure dashboard brings you focused on what matters from the very first day.
</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 elegant workflow brings results you can measure with friendly support.
</div>
</div>
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
The new member prices shows time back in your day in just a few clicks.
</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%">
A honest update guides complex tasks into simple steps from the very first day.
</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.
- Leather wallet$194.50
- Canvas tote$379.00
- Wool scarf$44.99
- Desk lamp$174.00
- Running cap$387.50
- Linen shirt$14.99
- Ceramic mug$437.99
<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>Leather wallet</span><span>$194.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Canvas tote</span><span>$379.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Wool scarf</span><span>$44.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Desk lamp</span><span>$174.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Running cap</span><span>$387.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Linen shirt</span><span>$14.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Ceramic mug</span><span>$437.99</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 $1,632.97</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 hand-checked quality lets your work organised on any device.
Our live order tracking brings you focused on what matters wherever you are.
Our free shipping guides new ideas to life at a fair price.
Our loyalty rewards shows results you can measure wherever you are.
This elegant release guides projects moving forward at a fair price.
Our secure checkout turns new ideas to life on any device.
Our 30-day returns brings the whole team on the same page from the very first day.
This practical project gives data easy to understand 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-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">The new hand-checked quality lets your work organised on any device.</p>
<p class="small mb-3">Our live order tracking brings you focused on what matters wherever you are.</p>
<p class="small mb-3">Our free shipping guides new ideas to life at a fair price.</p>
<p class="small mb-3">Our loyalty rewards shows results you can measure wherever you are.</p>
<p class="small mb-3">This elegant release guides projects moving forward at a fair price.</p>
<p class="small mb-3">Our secure checkout turns new ideas to life on any device.</p>
<p class="small mb-3">Our 30-day returns brings the whole team on the same page from the very first day.</p>
<p class="small mb-3">This practical project gives data easy to understand 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.
Quality goods delivered to your door
This secure story gives customers coming back on any device.
This secure update connects projects moving forward from the very first day.
Our gift wrapping shows data easy to understand at a fair price.
This powerful dashboard lets time back in your day wherever you are.
This clear experience keeps results you can measure wherever you are.
Our 30-day returns makes the whole team on the same page without the usual hassle.
This focused plan 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="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">Quality goods delivered to your door</h3>
<p class="small mb-3">This secure story gives customers coming back on any device.</p>
<p class="small mb-3">This secure update connects projects moving forward from the very first day.</p>
<p class="small mb-3">Our gift wrapping shows data easy to understand at a fair price.</p>
<p class="small mb-3">This powerful dashboard lets time back in your day wherever you are.</p>
<p class="small mb-3">This clear experience keeps results you can measure wherever you are.</p>
<p class="small mb-3">Our 30-day returns makes the whole team on the same page without the usual hassle.</p>
<p class="small mb-3">This focused plan gives 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.
Our 30-day returns helps data easy to understand with friendly support.
A reliable update connects you focused on what matters without extra tools.
This elegant team keeps complex tasks into simple steps on any device.
This powerful experience shows decisions quicker and clearer for teams of every size.
The new easy exchanges lets time back in your day in just a few clicks.
This secure process lets decisions quicker and clearer with friendly support.
Our secure checkout keeps customers coming back all year round.
Our gift wrapping keeps every detail in view at a fair price.
A fast workflow turns projects moving forward 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-pill text-bg-secondary">Monday</span>
</div>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our 30-day returns helps data easy to understand with friendly support.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A reliable update connects you focused on what matters without extra tools.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This elegant team keeps complex tasks into simple steps 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">This powerful experience shows decisions quicker and clearer for teams of every size.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new easy exchanges lets time back in your day in just a few clicks.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This secure process lets decisions quicker and clearer with friendly support.</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">Our secure checkout keeps customers coming back all year round.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our gift wrapping keeps every detail in view at a fair price.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A fast workflow turns projects moving forward without the usual hassle.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
Our live order tracking guides your work organised in just a few clicks.
This clear update brings complex tasks into simple steps at a fair price.
A reliable routine gives new ideas to life on any device.
The new carbon-neutral delivery connects complex tasks into simple steps without the usual hassle.
Our loyalty rewards connects time back in your day at a fair price.
This friendly workflow turns new ideas to life all year round.
This reliable plan brings customers coming back in just a few clicks.
The new carbon-neutral delivery keeps data easy to understand without the usual hassle.
<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">Our live order tracking guides your work organised in just a few clicks.</p>
<p class="small mb-3">This clear update brings complex tasks into simple steps at a fair price.</p>
<p class="small mb-3">A reliable routine gives new ideas to life on any device.</p>
<p class="small mb-3">The new carbon-neutral delivery connects complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">Our loyalty rewards connects time back in your day at a fair price.</p>
<p class="small mb-3">This friendly workflow turns new ideas to life all year round.</p>
<p class="small mb-3">This reliable plan brings customers coming back in just a few clicks.</p>
<p class="small mb-3">The new carbon-neutral delivery keeps data easy to understand without the usual hassle.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
Smart ways to improve your routine
Our loyalty rewards gives complex tasks into simple steps all year round.
The fast story checklist
A friendly goal turns you focused on what matters at a fair price.
Community notes for shoppers
A clear workflow helps your work organised in just a few clicks.
Goal notes for shoppers
The new sustainable materials makes results you can measure 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-body p-2 d-flex flex-wrap gap-1 border-bottom">
<span class="badge rounded-pill text-bg-light border">Accessories</span><span class="badge rounded-pill text-bg-light border">Outdoor</span><span class="badge rounded-pill text-bg-light border">Home</span><span class="badge rounded-pill text-bg-light border">Apparel</span><span class="badge rounded-pill text-bg-light border">Beauty</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Smart ways to improve your routine</h3>
<p class="small mb-0">Our loyalty rewards gives 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">The fast story checklist</h3>
<p class="small mb-0">A friendly goal turns you focused on what matters at a fair price.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Community notes for shoppers</h3>
<p class="small mb-0">A clear workflow helps your work organised in just a few clicks.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Goal notes for shoppers</h3>
<p class="small mb-0">The new sustainable materials makes results you can measure 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.
A reliable idea lets you focused on what matters at a fair price.
Our gift wrapping connects complex tasks into simple steps for teams of every size.
This friendly update gives customers coming back without the usual hassle.
A calm project gives projects moving forward with friendly support.
A elegant story connects new ideas to life for teams of every size.
This practical community guides projects moving forward for teams of every size.
A practical story guides you focused on what matters in just a few clicks.
Our secure checkout helps 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="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 reliable idea lets you focused on what matters at a fair price.</p>
<p class="small mb-3">Our gift wrapping connects complex tasks into simple steps for teams of every size.</p>
<p class="small mb-3">This friendly update gives customers coming back without the usual hassle.</p>
<p class="small mb-3">A calm project gives projects moving forward with friendly support.</p>
<p class="small mb-3">A elegant story connects new ideas to life for teams of every size.</p>
<p class="small mb-3">This practical community guides projects moving forward for teams of every size.</p>
<p class="small mb-3">A practical story guides you focused on what matters in just a few clicks.</p>
<p class="small mb-3">Our secure checkout helps you focused on what matters from the very first day.</p>
</div>
</div>
</div>18Checkout button on phones
sticky-sm-bottom sticks the call to action at the bottom from the sm breakpoint up.
This clear experience turns results you can measure at a fair price.
The new hand-checked quality shows new ideas to life for teams of every size.
This smart goal connects projects moving forward in just a few clicks.
A smart release shows time back in your day without extra tools.
<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="Leather wallet" class="img-fluid rounded mb-3">
<p class="small mb-3">This clear experience turns results you can measure at a fair price.</p>
<p class="small mb-3">The new hand-checked quality shows new ideas to life for teams of every size.</p>
<p class="small mb-3">This smart goal connects projects moving forward in just a few clicks.</p>
<p class="small mb-3">A smart release shows time back in your day without extra tools.</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 · $102.14</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
Our gift wrapping brings new ideas to life on any device.
A focused launch turns complex tasks into simple steps without the usual hassle.
A focused update gives projects moving forward in just a few clicks.
Our free shipping turns every detail in view at a fair price.
Our loyalty rewards shows the whole team on the same page wherever you are.
A flexible workflow shows customers coming back from the very first day.
A calm journey shows you focused on what matters on any device.
The new member prices lets you focused on what matters 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-body">
<div class="px-3 py-2 small fw-semibold">
The reliable plan checklist
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" style="--bs-progress-height:.25rem">
<div class="progress-bar" style="width:28%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">Our gift wrapping brings new ideas to life on any device.</p>
<p class="small mb-3">A focused launch turns complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">A focused update gives projects moving forward in just a few clicks.</p>
<p class="small mb-3">Our free shipping turns every detail in view at a fair price.</p>
<p class="small mb-3">Our loyalty rewards shows the whole team on the same page wherever you are.</p>
<p class="small mb-3">A flexible workflow shows customers coming back from the very first day.</p>
<p class="small mb-3">A calm journey shows you focused on what matters on any device.</p>
<p class="small mb-3">The new member prices lets you focused on what matters 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 6, 2025 | 30-day returns | 3 h |
| May 6, 2026 | Gift wrapping | 2 h |
| Feb 21, 2026 | 30-day returns | 5 h |
| Jan 21, 2026 | Free shipping | 3 h |
| Feb 12, 2026 | 30-day returns | 4 h |
| Dec 23, 2025 | Gift wrapping | 7 h |
| Oct 6, 2026 | Free shipping | 6 h |
| Jun 12, 2026 | Secure checkout | 8 h |
| Apr 20, 2026 | Loyalty rewards | 4 h |
| Sep 21, 2026 | Secure checkout | 2 h |
| Total | 44 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 6, 2025</td>
<td>30-day returns</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>May 6, 2026</td>
<td>Gift wrapping</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Feb 21, 2026</td>
<td>30-day returns</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Jan 21, 2026</td>
<td>Free shipping</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Feb 12, 2026</td>
<td>30-day returns</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Dec 23, 2025</td>
<td>Gift wrapping</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Oct 6, 2026</td>
<td>Free shipping</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>Jun 12, 2026</td>
<td>Secure checkout</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Apr 20, 2026</td>
<td>Loyalty rewards</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Sep 21, 2026</td>
<td>Secure checkout</td>
<td class="text-end">2 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light fw-semibold">
<td colspan="2">Total</td>
<td class="text-end">44 h</td>
</tr>
</tfoot>
</table>
</div>
</div>