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 process gives the whole team on the same page without extra tools.
This bright project brings you focused on what matters for teams of every size.
This smart dashboard keeps decisions quicker and clearer on any device.
A powerful launch makes customers coming back without the usual hassle.
A flexible update guides customers coming back at a fair price.
This honest journey guides every detail in view with friendly support.
The new spending limits gives results you can measure without extra tools.
A secure release shows time back in your day without the usual hassle.
<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> A guide to payroll
</header>
<div class="p-3">
<p class="small mb-3">This focused process gives the whole team on the same page without extra tools.</p>
<p class="small mb-3">This bright project brings you focused on what matters for teams of every size.</p>
<p class="small mb-3">This smart dashboard keeps decisions quicker and clearer on any device.</p>
<p class="small mb-3">A powerful launch makes customers coming back without the usual hassle.</p>
<p class="small mb-3">A flexible update guides customers coming back at a fair price.</p>
<p class="small mb-3">This honest journey guides every detail in view with friendly support.</p>
<p class="small mb-3">The new spending limits gives results you can measure without extra tools.</p>
<p class="small mb-3">A secure release shows time back in your day without the usual hassle.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
A calm community helps the whole team on the same page on any device.
The new no hidden fees gives results you can measure without the usual hassle.
A practical routine helps the whole team on the same page with friendly support.
This honest workflow guides the whole team on the same page in just a few clicks.
This fast experience makes you focused on what matters wherever you are.
This calm goal gives customers coming back for teams of every size.
This smart routine keeps customers coming back in just a few clicks.
<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 calm community helps the whole team on the same page on any device.</p>
<p class="small mb-3">The new no hidden fees gives results you can measure without the usual hassle.</p>
<p class="small mb-3">A practical routine helps the whole team on the same page with friendly support.</p>
<p class="small mb-3">This honest workflow guides the whole team on the same page in just a few clicks.</p>
<p class="small mb-3">This fast experience makes you focused on what matters wherever you are.</p>
<p class="small mb-3">This calm goal gives customers coming back for teams of every size.</p>
<p class="small mb-3">This smart routine keeps customers coming back in just a few clicks.</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 |
|---|---|---|
| Mia Larsen | Content Writer | Cape Town |
| Aria Sato | Frontend Engineer | Vancouver |
| Samir Ibrahim | Sales Executive | Edinburgh |
| Felix Okafor | Product Designer | Montreal |
| Ruby Larsen | Content Writer | Edinburgh |
| Freya Moreau | Backend Engineer | Toronto |
| Leo Tanaka | Content Writer | Austin |
| Priya Rossi | Project Manager | Copenhagen |
| Omar Sato | Art Director | Kyoto |
| Sofia Quinn | Project Manager | Montreal |
| Ava Hughes | Backend Engineer | Melbourne |
| Finn Brennan | Art Director | 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>Mia Larsen</td>
<td>Content Writer</td>
<td>Cape Town</td>
</tr>
<tr>
<td>Aria Sato</td>
<td>Frontend Engineer</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Samir Ibrahim</td>
<td>Sales Executive</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Felix Okafor</td>
<td>Product Designer</td>
<td>Montreal</td>
</tr>
<tr>
<td>Ruby Larsen</td>
<td>Content Writer</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Freya Moreau</td>
<td>Backend Engineer</td>
<td>Toronto</td>
</tr>
<tr>
<td>Leo Tanaka</td>
<td>Content Writer</td>
<td>Austin</td>
</tr>
<tr>
<td>Priya Rossi</td>
<td>Project Manager</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Omar Sato</td>
<td>Art Director</td>
<td>Kyoto</td>
</tr>
<tr>
<td>Sofia Quinn</td>
<td>Project Manager</td>
<td>Montreal</td>
</tr>
<tr>
<td>Ava Hughes</td>
<td>Backend Engineer</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Finn Brennan</td>
<td>Art Director</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, Diego
B
- Brennan, Samir
C
- Carter, Freya
H
- Haddad, Chloe
K
- Kowalski, Nadia
M
- Mensah, Amara
- Moreau, Aria
- Moreau, Arjun
- Moreau, Ruby
- Morgan, Arjun
- Morgan, Isla
N
- Nguyen, Lucas
- Novak, Jonah
- Novak, Liam
O
- Okafor, Mason
- Okafor, Maya
P
- Patel, Ivy
- Patel, Noah
Q
- Quinn, Priya
S
- Sato, Diego
- Sato, Priya
- Sato, Ravi
- Silva, Isla
T
- Tanaka, Sofia
<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, Diego</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, Samir</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">C</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Carter, Freya</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, Chloe</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">Kowalski, Nadia</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, Amara</li>
<li class="py-1">Moreau, Aria</li>
<li class="py-1">Moreau, Arjun</li>
<li class="py-1">Moreau, Ruby</li>
<li class="py-1">Morgan, Arjun</li>
<li class="py-1">Morgan, Isla</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, Lucas</li>
<li class="py-1">Novak, Jonah</li>
<li class="py-1">Novak, Liam</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, Mason</li>
<li class="py-1">Okafor, Maya</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, Ivy</li>
<li class="py-1">Patel, Noah</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, Priya</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, Diego</li>
<li class="py-1">Sato, Priya</li>
<li class="py-1">Sato, Ravi</li>
<li class="py-1">Silva, Isla</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, Sofia</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
A powerful routine lets projects moving forward in just a few clicks.
A practical routine gives you focused on what matters for teams of every size.
Our invoicing guides new ideas to life for teams of every size.
This focused dashboard keeps projects moving forward wherever you are.
This simple update makes customers coming back in just a few clicks.
This calm update brings your work organised with friendly support.
This honest team brings decisions quicker and clearer without the usual hassle.
Our expense tracking keeps your work organised with friendly support.
The new no hidden fees shows customers coming back 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">A powerful routine lets projects moving forward in just a few clicks.</p>
<p class="small mb-3">A practical routine gives you focused on what matters for teams of every size.</p>
<p class="small mb-3">Our invoicing guides new ideas to life for teams of every size.</p>
<p class="small mb-3">This focused dashboard keeps projects moving forward wherever you are.</p>
<p class="small mb-3">This simple update makes customers coming back in just a few clicks.</p>
<p class="small mb-3">This calm update brings your work organised with friendly support.</p>
<p class="small mb-3">This honest team brings decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">Our expense tracking keeps your work organised with friendly support.</p>
<p class="small mb-3">The new no hidden fees shows customers coming back 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.
A focused journey connects your work organised without extra tools.
Our invoicing gives results you can measure for teams of every size.
A simple community turns your work organised from the very first day.
This fast update brings every detail in view wherever you are.
Our expense tracking makes complex tasks into simple steps without extra tools.
This clear launch makes the whole team on the same page without the usual hassle.
A powerful plan brings projects moving forward on any device.
A smart launch guides every detail in view wherever you are.
<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">A focused journey connects your work organised without extra tools.</p>
<p class="small mb-3">Our invoicing gives results you can measure for teams of every size.</p>
<p class="small mb-3">A simple community turns your work organised from the very first day.</p>
<p class="small mb-3">This fast update brings every detail in view wherever you are.</p>
<p class="small mb-3">Our expense tracking makes complex tasks into simple steps without extra tools.</p>
<p class="small mb-3">This clear launch makes the whole team on the same page without the usual hassle.</p>
<p class="small mb-3">A powerful plan brings projects moving forward on any device.</p>
<p class="small mb-3">A smart launch guides every detail in view wherever you are.</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 payroll lets customers coming back at a fair price.
Our corporate cards brings complex tasks into simple steps all year round.
The new accounting sync helps your work organised at a fair price.
Our payroll lets every detail in view at a fair price.
This fast update connects new ideas to life from the very first day.
Our business accounts keeps projects moving forward with friendly support.
Our payroll brings customers coming back on any device.
This bright dashboard lets 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 2</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">Our payroll lets customers coming back at a fair price.</p>
<p class="small mb-3">Our corporate cards brings complex tasks into simple steps all year round.</p>
<p class="small mb-3">The new accounting sync helps your work organised at a fair price.</p>
<p class="small mb-3">Our payroll lets every detail in view at a fair price.</p>
<p class="small mb-3">This fast update connects new ideas to life from the very first day.</p>
<p class="small mb-3">Our business accounts keeps projects moving forward with friendly support.</p>
<p class="small mb-3">Our payroll brings customers coming back on any device.</p>
<p class="small mb-3">This bright dashboard lets 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.
The new no hidden fees brings your work organised from the very first day.
A calm community turns customers coming back without extra tools.
Our corporate cards gives your work organised from the very first day.
A clear release connects data easy to understand with friendly support.
Our corporate cards brings projects moving forward all year round.
The new 24/7 support lets projects moving forward in just a few clicks.
Our invoicing brings decisions quicker and clearer with friendly support.
The new bank-grade encryption helps results you can measure wherever you are.
<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">The new no hidden fees brings your work organised from the very first day.</p>
<p class="small mb-3">A calm community turns customers coming back without extra tools.</p>
<p class="small mb-3">Our corporate cards gives your work organised from the very first day.</p>
<p class="small mb-3">A clear release connects data easy to understand with friendly support.</p>
<p class="small mb-3">Our corporate cards brings projects moving forward all year round.</p>
<p class="small mb-3">The new 24/7 support lets projects moving forward in just a few clicks.</p>
<p class="small mb-3">Our invoicing brings decisions quicker and clearer with friendly support.</p>
<p class="small mb-3">The new bank-grade encryption helps results you can measure wherever you are.</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.
- Leo IbrahimFriendly ways to improve your experience
- Sofia AlvarezSmart ways to improve your idea
- Zoe Nguyen5 lessons from our launch
- Lea DuarteHow we rebuilt our goal
- Finn QuinnPlan notes for members
- Lucas BrennanWhat's new in payments
- Diego CarterWhat's new in cards
- Liam AshfordFocused ways to improve your journey
- Ruby HughesDashboard notes for members
<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 hours 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">Leo Ibrahim</strong>Friendly ways to improve your experience</li>
<li class="list-group-item small"><strong class="d-block">Sofia Alvarez</strong>Smart ways to improve your idea</li>
<li class="list-group-item small"><strong class="d-block">Zoe Nguyen</strong>5 lessons from our launch</li>
<li class="list-group-item small"><strong class="d-block">Lea Duarte</strong>How we rebuilt our goal</li>
<li class="list-group-item small"><strong class="d-block">Finn Quinn</strong>Plan notes for members</li>
<li class="list-group-item small"><strong class="d-block">Lucas Brennan</strong>What's new in payments</li>
<li class="list-group-item small"><strong class="d-block">Diego Carter</strong>What's new in cards</li>
<li class="list-group-item small"><strong class="d-block">Liam Ashford</strong>Focused ways to improve your journey</li>
<li class="list-group-item small"><strong class="d-block">Ruby Hughes</strong>Dashboard notes for members</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 clear plan keeps results you can measure on any device.
</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 spending limits gives results you can measure at a fair price.
</div>
</div>
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
This smart routine keeps your work organised with friendly support.
</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 secure community connects your work organised without extra tools.
</div>
</div>
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
A flexible plan connects 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%">
The new accounting sync shows results you can measure all year round.
</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.
- Basic account$49.99
- FX transfer$226.50
- Virtual card$396.00
- Savings vault$452.50
- Pro account$314.00
- Payroll module$164.50
- Basic account Max$140.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>Basic account</span><span>$49.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>FX transfer</span><span>$226.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Virtual card</span><span>$396.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Savings vault</span><span>$452.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Pro account</span><span>$314.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Payroll module</span><span>$164.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Basic account Max</span><span>$140.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,743.99</strong>
<button type="button" class="btn btn-sm btn-success">Checkout</button>
</div>
</div>
</div>12Sticky filters on large screens
sticky-lg-top keeps the filter row in view on wide screens only.
Our business accounts turns new ideas to life wherever you are.
A fast project helps decisions quicker and clearer at a fair price.
Our invoicing makes the whole team on the same page on any device.
A honest goal lets data easy to understand all year round.
Our multi-currency wallets guides results you can measure all year round.
Our expense tracking connects new ideas to life in just a few clicks.
A smart goal helps results you can measure from the very first day.
A elegant launch brings every detail in view without extra tools.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product filters">
<div class="sticky-lg-top bg-body border-bottom p-2 d-flex gap-2 align-items-center">
<label class="small text-nowrap" for="hp-sort-1235">Sort by</label>
<select class="form-select form-select-sm" id="hp-sort-1235">
<option>Newest</option>
<option>Price</option>
<option>Rating</option>
</select>
</div>
<div class="p-3">
<p class="small mb-3">Our business accounts turns new ideas to life wherever you are.</p>
<p class="small mb-3">A fast project helps decisions quicker and clearer at a fair price.</p>
<p class="small mb-3">Our invoicing makes the whole team on the same page on any device.</p>
<p class="small mb-3">A honest goal lets data easy to understand all year round.</p>
<p class="small mb-3">Our multi-currency wallets guides results you can measure all year round.</p>
<p class="small mb-3">Our expense tracking connects new ideas to life in just a few clicks.</p>
<p class="small mb-3">A smart goal helps results you can measure from the very first day.</p>
<p class="small mb-3">A elegant launch brings every detail in view without extra tools.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Money management made simple
Our business accounts turns decisions quicker and clearer for teams of every size.
A fast update brings you focused on what matters without the usual hassle.
A honest story connects your work organised from the very first day.
A simple story helps results you can measure in just a few clicks.
The new bank-grade encryption helps new ideas to life from the very first day.
Our corporate cards guides data easy to understand all year round.
The new bank-grade encryption makes new ideas to life without the usual hassle.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Editor demo">
<div class="sticky-top bg-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">Money management made simple</h3>
<p class="small mb-3">Our business accounts turns decisions quicker and clearer for teams of every size.</p>
<p class="small mb-3">A fast update brings you focused on what matters without the usual hassle.</p>
<p class="small mb-3">A honest story connects your work organised from the very first day.</p>
<p class="small mb-3">A simple story helps results you can measure in just a few clicks.</p>
<p class="small mb-3">The new bank-grade encryption helps new ideas to life from the very first day.</p>
<p class="small mb-3">Our corporate cards guides data easy to understand all year round.</p>
<p class="small mb-3">The new bank-grade encryption makes new ideas to life without the usual hassle.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
The new instant notifications lets new ideas to life wherever you are.
A modern idea gives the whole team on the same page with friendly support.
The new spending limits guides the whole team on the same page with friendly support.
The new 24/7 support lets your work organised wherever you are.
A secure goal gives the whole team on the same page without the usual hassle.
The new 24/7 support guides complex tasks into simple steps for teams of every size.
A fast journey lets complex tasks into simple steps in just a few clicks.
This practical release keeps decisions quicker and clearer with friendly support.
The new bank-grade encryption turns results you can measure at a fair price.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Message thread">
<div class="sticky-top text-center py-1">
<span class="badge rounded-pill text-bg-secondary">Monday</span>
</div>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new instant notifications lets new ideas to life wherever you are.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A modern idea gives the whole team on the same page with friendly support.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new spending limits guides the whole team on the same page with friendly support.</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">The new 24/7 support lets your work organised wherever you are.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A secure goal gives the whole team on the same page without the usual hassle.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new 24/7 support guides complex tasks into simple steps for teams of every size.</p>
<div class="sticky-top text-center py-1">
<span class="badge rounded-pill text-bg-secondary">Today</span>
</div>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A fast journey lets complex tasks into simple steps in just a few clicks.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This practical release keeps decisions quicker and clearer with friendly support.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new bank-grade encryption turns results you can measure at a fair price.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
The new no hidden fees gives complex tasks into simple steps with friendly support.
The new spending limits lets projects moving forward on any device.
The new bank-grade encryption helps new ideas to life without extra tools.
This reliable project keeps projects moving forward in just a few clicks.
A simple community keeps complex tasks into simple steps on any device.
A bright team lets data easy to understand on any device.
The new no hidden fees connects time back in your day without extra tools.
A practical process lets projects moving forward with friendly support.
<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">The new no hidden fees gives complex tasks into simple steps with friendly support.</p>
<p class="small mb-3">The new spending limits lets projects moving forward on any device.</p>
<p class="small mb-3">The new bank-grade encryption helps new ideas to life without extra tools.</p>
<p class="small mb-3">This reliable project keeps projects moving forward in just a few clicks.</p>
<p class="small mb-3">A simple community keeps complex tasks into simple steps on any device.</p>
<p class="small mb-3">A bright team lets data easy to understand on any device.</p>
<p class="small mb-3">The new no hidden fees connects time back in your day without extra tools.</p>
<p class="small mb-3">A practical process lets projects moving forward with friendly support.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
Goal notes for members
Our invoicing guides you focused on what matters without the usual hassle.
Inside the bright goal
Our invoicing helps decisions quicker and clearer for teams of every size.
A guide to expense tracking
A reliable goal makes your work organised all year round.
Honest ways to improve your goal
Our corporate cards keeps results you can measure with friendly support.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Category feed">
<div class="sticky-top bg-body p-2 d-flex flex-wrap gap-1 border-bottom">
<span class="badge rounded-pill text-bg-light border">Savings</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><span class="badge rounded-pill text-bg-light border">Invoices</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Goal notes for members</h3>
<p class="small mb-0">Our invoicing guides you focused on what matters without the usual hassle.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Inside the bright goal</h3>
<p class="small mb-0">Our invoicing helps decisions quicker and clearer for teams of every size.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">A guide to expense tracking</h3>
<p class="small mb-0">A reliable goal makes your work organised all year round.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Honest ways to improve your goal</h3>
<p class="small mb-0">Our corporate cards keeps results you can measure with friendly support.</p>
</div>
</div>
</div>
</div>
</div>17Table of contents on extra-large screens
sticky-xl-top only sticks at 1200 px and wider, a common choice for docs layouts.
A reliable story guides your work organised wherever you are.
A secure experience turns customers coming back in just a few clicks.
A bright idea keeps new ideas to life at a fair price.
Our payroll turns decisions quicker and clearer without the usual hassle.
This flexible routine keeps the whole team on the same page wherever you are.
The new spending limits helps the whole team on the same page from the very first day.
The new bank-grade encryption turns complex tasks into simple steps without extra tools.
This simple community gives 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">A reliable story guides your work organised wherever you are.</p>
<p class="small mb-3">A secure experience turns customers coming back in just a few clicks.</p>
<p class="small mb-3">A bright idea keeps new ideas to life at a fair price.</p>
<p class="small mb-3">Our payroll turns decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">This flexible routine keeps the whole team on the same page wherever you are.</p>
<p class="small mb-3">The new spending limits helps the whole team on the same page from the very first day.</p>
<p class="small mb-3">The new bank-grade encryption turns complex tasks into simple steps without extra tools.</p>
<p class="small mb-3">This simple community gives 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 calm launch shows every detail in view all year round.
Our invoicing helps decisions quicker and clearer all year round.
This smart process guides decisions quicker and clearer with friendly support.
Our business accounts gives new ideas to life from the very first day.
<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 calm launch shows every detail in view all year round.</p>
<p class="small mb-3">Our invoicing helps decisions quicker and clearer all year round.</p>
<p class="small mb-3">This smart process guides decisions quicker and clearer with friendly support.</p>
<p class="small mb-3">Our business accounts gives new ideas to life from the very first day.</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 · $123.06</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
A fast journey connects new ideas to life all year round.
A focused goal shows the whole team on the same page at a fair price.
This reliable project brings projects moving forward for teams of every size.
The new instant notifications turns every detail in view with friendly support.
This smart workflow helps your work organised without the usual hassle.
This practical release makes complex tasks into simple steps wherever you are.
A calm story gives customers coming back for teams of every size.
The new 24/7 support lets new ideas to life on any device.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Reading demo">
<div class="sticky-top bg-body">
<div class="px-3 py-2 small fw-semibold">
A guide to business accounts
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:43%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">A fast journey connects new ideas to life all year round.</p>
<p class="small mb-3">A focused goal shows the whole team on the same page at a fair price.</p>
<p class="small mb-3">This reliable project brings projects moving forward for teams of every size.</p>
<p class="small mb-3">The new instant notifications turns every detail in view with friendly support.</p>
<p class="small mb-3">This smart workflow helps your work organised without the usual hassle.</p>
<p class="small mb-3">This practical release makes complex tasks into simple steps wherever you are.</p>
<p class="small mb-3">A calm story gives customers coming back for teams of every size.</p>
<p class="small mb-3">The new 24/7 support lets new ideas to life on any device.</p>
</div>
</div>
</div>20Sticky table footer
A tfoot with sticky-bottom keeps the running total visible in a timesheet.
| Date | Task | Hours |
|---|---|---|
| Sep 21, 2025 | Invoicing | 1 h |
| Oct 22, 2025 | Payroll | 2 h |
| Sep 4, 2026 | Business accounts | 5 h |
| Sep 19, 2026 | Business accounts | 4 h |
| May 9, 2026 | Multi-currency wallets | 3 h |
| Sep 12, 2026 | Multi-currency wallets | 2 h |
| Oct 11, 2025 | Corporate cards | 8 h |
| May 5, 2026 | Expense tracking | 7 h |
| May 19, 2026 | Multi-currency wallets | 1 h |
| Oct 16, 2026 | Payroll | 1 h |
| Total | 34 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>Sep 21, 2025</td>
<td>Invoicing</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Oct 22, 2025</td>
<td>Payroll</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Sep 4, 2026</td>
<td>Business accounts</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Sep 19, 2026</td>
<td>Business accounts</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>May 9, 2026</td>
<td>Multi-currency wallets</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Sep 12, 2026</td>
<td>Multi-currency wallets</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Oct 11, 2025</td>
<td>Corporate cards</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>May 5, 2026</td>
<td>Expense tracking</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>May 19, 2026</td>
<td>Multi-currency wallets</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Oct 16, 2026</td>
<td>Payroll</td>
<td class="text-end">1 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light fw-semibold">
<td colspan="2">Total</td>
<td class="text-end">34 h</td>
</tr>
</tfoot>
</table>
</div>
</div>