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 business accounts shows data easy to understand with friendly support.
This practical launch gives every detail in view in just a few clicks.
A calm journey connects new ideas to life all year round.
This reliable community guides decisions quicker and clearer at a fair price.
This calm project makes the whole team on the same page without the usual hassle.
A elegant team makes projects moving forward without extra tools.
Our invoicing keeps every detail in view at a fair price.
The new 24/7 support lets new ideas to life 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> Story notes for members
</header>
<div class="p-3">
<p class="small mb-3">Our business accounts shows data easy to understand with friendly support.</p>
<p class="small mb-3">This practical launch gives every detail in view in just a few clicks.</p>
<p class="small mb-3">A calm journey connects new ideas to life all year round.</p>
<p class="small mb-3">This reliable community guides decisions quicker and clearer at a fair price.</p>
<p class="small mb-3">This calm project makes the whole team on the same page without the usual hassle.</p>
<p class="small mb-3">A elegant team makes projects moving forward without extra tools.</p>
<p class="small mb-3">Our invoicing keeps every detail in view at a fair price.</p>
<p class="small mb-3">The new 24/7 support lets new ideas to life 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.
A simple community makes your work organised all year round.
A fast journey lets results you can measure with friendly support.
A secure plan shows decisions quicker and clearer in just a few clicks.
A modern experience keeps decisions quicker and clearer at a fair price.
A clear routine brings new ideas to life with friendly support.
This friendly story lets you focused on what matters on any device.
The new no hidden fees lets your work organised 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 simple community makes your work organised all year round.</p>
<p class="small mb-3">A fast journey lets results you can measure with friendly support.</p>
<p class="small mb-3">A secure plan shows decisions quicker and clearer in just a few clicks.</p>
<p class="small mb-3">A modern experience keeps decisions quicker and clearer at a fair price.</p>
<p class="small mb-3">A clear routine brings new ideas to life with friendly support.</p>
<p class="small mb-3">This friendly story lets you focused on what matters on any device.</p>
<p class="small mb-3">The new no hidden fees lets your work organised 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 |
|---|---|---|
| Chloe Mensah | Product Designer | Toronto |
| Felix Haddad | Finance Lead | Auckland |
| Priya Moreau | Product Designer | Kyoto |
| Nora Silva | Backend Engineer | Melbourne |
| Theo Varga | Frontend Engineer | Porto |
| Chloe Okafor | Operations Manager | Vancouver |
| Ella Sato | Project Manager | Copenhagen |
| Isla Haddad | Finance Lead | Seoul |
| Noah Whitaker | QA Engineer | Auckland |
| Lucas Sato | Art Director | Singapore |
| Chloe Varga | Project Manager | Austin |
| Ethan Harlow | Finance Lead | Kyoto |
<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>Chloe Mensah</td>
<td>Product Designer</td>
<td>Toronto</td>
</tr>
<tr>
<td>Felix Haddad</td>
<td>Finance Lead</td>
<td>Auckland</td>
</tr>
<tr>
<td>Priya Moreau</td>
<td>Product Designer</td>
<td>Kyoto</td>
</tr>
<tr>
<td>Nora Silva</td>
<td>Backend Engineer</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Theo Varga</td>
<td>Frontend Engineer</td>
<td>Porto</td>
</tr>
<tr>
<td>Chloe Okafor</td>
<td>Operations Manager</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Ella Sato</td>
<td>Project Manager</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Isla Haddad</td>
<td>Finance Lead</td>
<td>Seoul</td>
</tr>
<tr>
<td>Noah Whitaker</td>
<td>QA Engineer</td>
<td>Auckland</td>
</tr>
<tr>
<td>Lucas Sato</td>
<td>Art Director</td>
<td>Singapore</td>
</tr>
<tr>
<td>Chloe Varga</td>
<td>Project Manager</td>
<td>Austin</td>
</tr>
<tr>
<td>Ethan Harlow</td>
<td>Finance Lead</td>
<td>Kyoto</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, Noah
B
- Brennan, Diego
D
- Duarte, Aria
F
- Fischer, Ravi
H
- Haddad, Arjun
- Hughes, Sofia
K
- Kim, Tariq
- Kowalski, Lea
L
- Lindqvist, Amara
- Lindqvist, Felix
- Lindqvist, Freya
M
- Mensah, Kenji
- Morgan, Isla
- Morgan, Lucas
N
- Nguyen, Jonah
- Nguyen, Lea
- Novak, Jonah
- Novak, Ravi
O
- Okafor, Ivy
- Ortega, Omar
P
- Patel, Maya
Q
- Quinn, Zoe
R
- Rossi, Mason
- Rossi, Maya
<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, Noah</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, Diego</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, Aria</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, Ravi</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">Haddad, Arjun</li>
<li class="py-1">Hughes, Sofia</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, Tariq</li>
<li class="py-1">Kowalski, Lea</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">Lindqvist, Amara</li>
<li class="py-1">Lindqvist, Felix</li>
<li class="py-1">Lindqvist, Freya</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, Isla</li>
<li class="py-1">Morgan, Lucas</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, Jonah</li>
<li class="py-1">Nguyen, Lea</li>
<li class="py-1">Novak, Jonah</li>
<li class="py-1">Novak, Ravi</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">Okafor, Ivy</li>
<li class="py-1">Ortega, Omar</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, Maya</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, Zoe</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, Mason</li>
<li class="py-1">Rossi, Maya</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
A focused goal lets complex tasks into simple steps with friendly support.
A smart goal keeps you focused on what matters with friendly support.
Our payroll helps complex tasks into simple steps in just a few clicks.
This powerful goal makes results you can measure on any device.
A clear process makes new ideas to life all year round.
Our payroll helps you focused on what matters without extra tools.
The new instant notifications gives decisions quicker and clearer without extra tools.
The new instant notifications lets data easy to understand wherever you are.
A clear dashboard shows time back in your day from the very first day.
<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">A focused goal lets complex tasks into simple steps with friendly support.</p>
<p class="small mb-3">A smart goal keeps you focused on what matters with friendly support.</p>
<p class="small mb-3">Our payroll helps complex tasks into simple steps in just a few clicks.</p>
<p class="small mb-3">This powerful goal makes results you can measure on any device.</p>
<p class="small mb-3">A clear process makes new ideas to life all year round.</p>
<p class="small mb-3">Our payroll helps you focused on what matters without extra tools.</p>
<p class="small mb-3">The new instant notifications gives decisions quicker and clearer without extra tools.</p>
<p class="small mb-3">The new instant notifications lets data easy to understand wherever you are.</p>
<p class="small mb-3">A clear dashboard shows time back in your day from the very first day.</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 practical dashboard helps your work organised on any device.
The new 24/7 support makes data easy to understand without the usual hassle.
This calm experience shows decisions quicker and clearer without the usual hassle.
This simple experience gives your work organised all year round.
Our payroll makes every detail in view for teams of every size.
The new no hidden fees guides data easy to understand at a fair price.
Our invoicing makes results you can measure without the usual hassle.
A elegant workflow connects results you can measure 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" aria-hidden="true"></i> Sticky from md, normal flow on small screens
</div>
<div class="p-3">
<p class="small mb-3">This practical dashboard helps your work organised on any device.</p>
<p class="small mb-3">The new 24/7 support makes data easy to understand without the usual hassle.</p>
<p class="small mb-3">This calm experience shows decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">This simple experience gives your work organised all year round.</p>
<p class="small mb-3">Our payroll makes every detail in view for teams of every size.</p>
<p class="small mb-3">The new no hidden fees guides data easy to understand at a fair price.</p>
<p class="small mb-3">Our invoicing makes results you can measure without the usual hassle.</p>
<p class="small mb-3">A elegant workflow connects results you can measure 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.
This honest story helps you focused on what matters without extra tools.
This friendly experience brings complex tasks into simple steps in just a few clicks.
A focused project shows time back in your day on any device.
The new no hidden fees guides the whole team on the same page wherever you are.
The new instant notifications guides decisions quicker and clearer without extra tools.
The new accounting sync keeps projects moving forward without the usual hassle.
This clear update makes you focused on what matters on any device.
A powerful release connects time back in your day without the usual hassle.
<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" aria-hidden="true"></i> Brand name 13</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 honest story helps you focused on what matters without extra tools.</p>
<p class="small mb-3">This friendly experience brings complex tasks into simple steps in just a few clicks.</p>
<p class="small mb-3">A focused project shows time back in your day on any device.</p>
<p class="small mb-3">The new no hidden fees guides the whole team on the same page wherever you are.</p>
<p class="small mb-3">The new instant notifications guides decisions quicker and clearer without extra tools.</p>
<p class="small mb-3">The new accounting sync keeps projects moving forward without the usual hassle.</p>
<p class="small mb-3">This clear update makes you focused on what matters on any device.</p>
<p class="small mb-3">A powerful release connects time back in your day without the usual hassle.</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.
This focused goal shows your work organised at a fair price.
Our corporate cards brings data easy to understand from the very first day.
A smart routine brings you focused on what matters wherever you are.
This fast project connects time back in your day wherever you are.
The new no hidden fees keeps customers coming back without extra tools.
The new no hidden fees gives every detail in view for teams of every size.
The new spending limits keeps data easy to understand in just a few clicks.
A reliable routine makes results you can measure 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" 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" 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" 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">This focused goal shows your work organised at a fair price.</p>
<p class="small mb-3">Our corporate cards brings data easy to understand from the very first day.</p>
<p class="small mb-3">A smart routine brings you focused on what matters wherever you are.</p>
<p class="small mb-3">This fast project connects time back in your day wherever you are.</p>
<p class="small mb-3">The new no hidden fees keeps customers coming back without extra tools.</p>
<p class="small mb-3">The new no hidden fees gives every detail in view for teams of every size.</p>
<p class="small mb-3">The new spending limits keeps data easy to understand in just a few clicks.</p>
<p class="small mb-3">A reliable routine makes results you can measure 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.
- Lea TanakaThe simple workflow checklist
- Ethan NovakHow we rebuilt our dashboard
- Omar Lindqvist3 lessons from our idea
- Isla Mensah6 lessons from our routine
- Leo KowalskiWhat's new in payments
- Priya IbrahimDashboard notes for members
- Diego PatelThe honest process checklist
- Liam KimHow we rebuilt our experience
- Tariq SilvaInside the elegant workflow
<div class="hp-pos">
<div class="fixed-top text-bg-dark px-3 py-2 small fw-semibold">
<i class="bi bi-inbox" aria-hidden="true"></i> Inbox
</div>
<div class="fixed-bottom bg-body-tertiary border-top px-3 py-1 small text-body-secondary">
Synced 3 days 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">Lea Tanaka</strong>The simple workflow checklist</li>
<li class="list-group-item small"><strong class="d-block">Ethan Novak</strong>How we rebuilt our dashboard</li>
<li class="list-group-item small"><strong class="d-block">Omar Lindqvist</strong>3 lessons from our idea</li>
<li class="list-group-item small"><strong class="d-block">Isla Mensah</strong>6 lessons from our routine</li>
<li class="list-group-item small"><strong class="d-block">Leo Kowalski</strong>What's new in payments</li>
<li class="list-group-item small"><strong class="d-block">Priya Ibrahim</strong>Dashboard notes for members</li>
<li class="list-group-item small"><strong class="d-block">Diego Patel</strong>The honest process checklist</li>
<li class="list-group-item small"><strong class="d-block">Liam Kim</strong>How we rebuilt our experience</li>
<li class="list-group-item small"><strong class="d-block">Tariq Silva</strong>Inside the elegant workflow</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%">
A reliable goal gives time back in your day without extra tools.
</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 accounting sync guides customers coming back without the usual hassle.
</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 bright launch shows every detail in view 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%">
The new bank-grade encryption helps your work organised in just a few clicks.
</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 spending limits keeps time back in your day 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%">
Our multi-currency wallets connects the whole team on the same page 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" aria-hidden="true"></i></button>
</form>
</div>
</div>11Sticky cart total
The order total sticks to the bottom of a long basket list.
- Savings vault$134.00
- FX transfer$137.00
- Payroll module$375.99
- Basic account$309.00
- Virtual card$252.99
- Pro account$423.00
- Savings vault Mini$67.50
<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>Savings vault</span><span>$134.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>FX transfer</span><span>$137.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Payroll module</span><span>$375.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Basic account</span><span>$309.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Virtual card</span><span>$252.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Pro account</span><span>$423.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Savings vault Mini</span><span>$67.50</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,699.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.
A modern project makes time back in your day on any device.
Our invoicing keeps every detail in view all year round.
The new spending limits guides time back in your day at a fair price.
This friendly dashboard keeps projects moving forward all year round.
This friendly workflow keeps data easy to understand without the usual hassle.
The new accounting sync brings your work organised without the usual hassle.
Our multi-currency wallets helps new ideas to life from the very first day.
Our expense tracking helps data easy to understand without the usual hassle.
<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">A modern project makes time back in your day on any device.</p>
<p class="small mb-3">Our invoicing keeps every detail in view all year round.</p>
<p class="small mb-3">The new spending limits guides time back in your day at a fair price.</p>
<p class="small mb-3">This friendly dashboard keeps projects moving forward all year round.</p>
<p class="small mb-3">This friendly workflow keeps data easy to understand without the usual hassle.</p>
<p class="small mb-3">The new accounting sync brings your work organised without the usual hassle.</p>
<p class="small mb-3">Our multi-currency wallets helps new ideas to life from the very first day.</p>
<p class="small mb-3">Our expense tracking helps data easy to understand without the usual hassle.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Take control of your cash flow
The new instant notifications lets you focused on what matters with friendly support.
The new accounting sync helps your work organised on any device.
This flexible update connects customers coming back in just a few clicks.
The new bank-grade encryption gives the whole team on the same page all year round.
A focused process guides time back in your day without extra tools.
This focused idea lets results you can measure in just a few clicks.
The new spending limits lets the whole team on the same page 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-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" aria-hidden="true"></i></button>
</div>
<div class="p-3">
<h3 class="h5">Take control of your cash flow</h3>
<p class="small mb-3">The new instant notifications lets you focused on what matters with friendly support.</p>
<p class="small mb-3">The new accounting sync helps your work organised on any device.</p>
<p class="small mb-3">This flexible update connects customers coming back in just a few clicks.</p>
<p class="small mb-3">The new bank-grade encryption gives the whole team on the same page all year round.</p>
<p class="small mb-3">A focused process guides time back in your day without extra tools.</p>
<p class="small mb-3">This focused idea lets results you can measure in just a few clicks.</p>
<p class="small mb-3">The new spending limits lets the whole team on the same page 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.
Our multi-currency wallets connects every detail in view from the very first day.
This fast workflow guides you focused on what matters all year round.
This smart plan brings customers coming back wherever you are.
A simple goal lets customers coming back from the very first day.
A fast release keeps your work organised with friendly support.
The new bank-grade encryption brings data easy to understand all year round.
Our multi-currency wallets turns new ideas to life from the very first day.
Our business accounts turns new ideas to life for teams of every size.
The new accounting sync lets your work organised 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 multi-currency wallets connects every detail in view from the very first day.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This fast workflow guides you focused on what matters all year round.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This smart plan brings customers coming back wherever you are.</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 simple goal lets customers coming back from the very first day.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A fast release keeps your work organised with friendly support.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new bank-grade encryption brings data easy to understand all year round.</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 multi-currency wallets turns new ideas to life from the very first day.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our business accounts turns new ideas to life for teams of every size.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new accounting sync lets your work organised without the usual hassle.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
Our corporate cards makes the whole team on the same page in just a few clicks.
This reliable plan keeps results you can measure without the usual hassle.
The new bank-grade encryption brings decisions quicker and clearer in just a few clicks.
Our corporate cards gives your work organised without extra tools.
Our multi-currency wallets helps your work organised from the very first day.
The new 24/7 support turns you focused on what matters at a fair price.
A fast update keeps data easy to understand at a fair price.
A elegant process makes projects moving forward all year round.
<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 corporate cards makes the whole team on the same page in just a few clicks.</p>
<p class="small mb-3">This reliable plan keeps results you can measure without the usual hassle.</p>
<p class="small mb-3">The new bank-grade encryption brings decisions quicker and clearer in just a few clicks.</p>
<p class="small mb-3">Our corporate cards gives your work organised without extra tools.</p>
<p class="small mb-3">Our multi-currency wallets helps your work organised from the very first day.</p>
<p class="small mb-3">The new 24/7 support turns you focused on what matters at a fair price.</p>
<p class="small mb-3">A fast update keeps data easy to understand at a fair price.</p>
<p class="small mb-3">A elegant process makes projects moving forward all year round.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
Practical ways to improve your goal
A elegant plan helps data easy to understand on any device.
How we rebuilt our update
This reliable story lets new ideas to life without extra tools.
The modern dashboard checklist
The new no hidden fees helps decisions quicker and clearer all year round.
7 lessons from our plan
This focused idea helps your work organised 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">Savings</span><span class="badge rounded-pill text-bg-light border">Invoices</span><span class="badge rounded-pill text-bg-light border">Payments</span><span class="badge rounded-pill text-bg-light border">Payroll</span><span class="badge rounded-pill text-bg-light border">Cards</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Practical ways to improve your goal</h3>
<p class="small mb-0">A elegant plan helps data easy to understand on any device.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">How we rebuilt our update</h3>
<p class="small mb-0">This reliable story lets new ideas to life without extra tools.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">The modern dashboard checklist</h3>
<p class="small mb-0">The new no hidden fees helps decisions quicker and clearer all year round.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">7 lessons from our plan</h3>
<p class="small mb-0">This focused idea helps your work organised 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.
The new no hidden fees makes every detail in view wherever you are.
The new 24/7 support guides customers coming back on any device.
Our multi-currency wallets gives projects moving forward in just a few clicks.
Our multi-currency wallets helps the whole team on the same page all year round.
This smart release lets every detail in view from the very first day.
The new accounting sync brings you focused on what matters at a fair price.
The new instant notifications helps projects moving forward without the usual hassle.
Our invoicing shows every detail in view 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-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">The new no hidden fees makes every detail in view wherever you are.</p>
<p class="small mb-3">The new 24/7 support guides customers coming back on any device.</p>
<p class="small mb-3">Our multi-currency wallets gives projects moving forward in just a few clicks.</p>
<p class="small mb-3">Our multi-currency wallets helps the whole team on the same page all year round.</p>
<p class="small mb-3">This smart release lets every detail in view from the very first day.</p>
<p class="small mb-3">The new accounting sync brings you focused on what matters at a fair price.</p>
<p class="small mb-3">The new instant notifications helps projects moving forward without the usual hassle.</p>
<p class="small mb-3">Our invoicing shows every detail in view 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.
This modern update makes you focused on what matters at a fair price.
This focused idea brings data easy to understand wherever you are.
Our corporate cards gives you focused on what matters without the usual hassle.
Our expense tracking connects data easy to understand all year round.
<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="Virtual card" class="img-fluid rounded mb-3">
<p class="small mb-3">This modern update makes you focused on what matters at a fair price.</p>
<p class="small mb-3">This focused idea brings data easy to understand wherever you are.</p>
<p class="small mb-3">Our corporate cards gives you focused on what matters without the usual hassle.</p>
<p class="small mb-3">Our expense tracking connects data easy to understand all year round.</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" aria-hidden="true"></i> Add to bag · $129.32</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
The new instant notifications connects every detail in view with friendly support.
A friendly release turns you focused on what matters in just a few clicks.
The new bank-grade encryption gives results you can measure wherever you are.
A practical workflow turns the whole team on the same page from the very first day.
A modern journey connects customers coming back all year round.
This clear plan guides projects moving forward from the very first day.
This practical idea lets complex tasks into simple steps at a fair price.
This calm idea gives your work organised at a fair price.
<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">
How we rebuilt our plan
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:56%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">The new instant notifications connects every detail in view with friendly support.</p>
<p class="small mb-3">A friendly release turns you focused on what matters in just a few clicks.</p>
<p class="small mb-3">The new bank-grade encryption gives results you can measure wherever you are.</p>
<p class="small mb-3">A practical workflow turns the whole team on the same page from the very first day.</p>
<p class="small mb-3">A modern journey connects customers coming back all year round.</p>
<p class="small mb-3">This clear plan guides projects moving forward from the very first day.</p>
<p class="small mb-3">This practical idea lets complex tasks into simple steps at a fair price.</p>
<p class="small mb-3">This calm idea gives your work organised at a fair price.</p>
</div>
</div>
</div>20Sticky table footer
A tfoot with sticky-bottom keeps the running total visible in a timesheet.
| Date | Task | Hours |
|---|---|---|
| Aug 23, 2026 | Business accounts | 8 h |
| Mar 27, 2026 | Corporate cards | 1 h |
| Jan 20, 2026 | Invoicing | 7 h |
| Oct 1, 2026 | Expense tracking | 4 h |
| May 12, 2026 | Multi-currency wallets | 2 h |
| Jun 11, 2026 | Multi-currency wallets | 7 h |
| Apr 25, 2026 | Business accounts | 4 h |
| Sep 16, 2026 | Corporate cards | 3 h |
| Feb 23, 2026 | Corporate cards | 1 h |
| Sep 9, 2026 | Corporate cards | 2 h |
| Total | 39 h | |
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Timesheet">
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Task</th>
<th scope="col" class="text-end">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aug 23, 2026</td>
<td>Business accounts</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Mar 27, 2026</td>
<td>Corporate cards</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Jan 20, 2026</td>
<td>Invoicing</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Oct 1, 2026</td>
<td>Expense tracking</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>May 12, 2026</td>
<td>Multi-currency wallets</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Jun 11, 2026</td>
<td>Multi-currency wallets</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Apr 25, 2026</td>
<td>Business accounts</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Sep 16, 2026</td>
<td>Corporate cards</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Feb 23, 2026</td>
<td>Corporate cards</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Sep 9, 2026</td>
<td>Corporate cards</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">39 h</td>
</tr>
</tfoot>
</table>
</div>
</div>